Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

tailwind css
ruby on rails
ruby

How to install Tailwind in Ruby on Rails

Maham Sawar

Overview

Ruby on Rails (RoR) is a popular open-source MVCModel-View-Controller full-stack framework used to create web applications.

This shot demonstrates how to use Tailwind CSS in our Ruby on Rails projects.

For the example, we’ll use the following versions:

  • Rails 6.1
  • Ruby 3.0.0

Step 1: Create a new Rails application

First, we create a new rails application using the command given below:

 $ rails new tailwind_example

Step 2: Install Tailwind CSS in the project

We navigate to the new project directory:

 $ cd tailwind_example

We add Tailwind CSS as a dependency by running the line below:

 $ yarn add tailwindcss

Step 3: Create a tailwind.config.js file

To create a Tailwind configuration file, we use the following command.

 $ npx tailwindcss init

Step 4: Setting up a postcss.config.js file

At the root of our Rails project, we’ll find a postcss.config.js file. There will be some code in this file already.

We add require("tailwindcss"), to the list of imports.

Here’s how our postcss.config.js file now looks.

// postcss.config.js

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('postcss-import'),
    require('postcss-flexbugs-fixes'),
    require('postcss-preset-env')({
      autoprefixer: {
        flexbox: 'no-2009'
      },
      stage: 3
    })
  ]

Step 5: Add Tailwind to the CSS file

Inside app/javascript, we create a new file called app.css.

We add the following imports to the file:

// app/javascript/app.css 

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

Step 6: Add the CSS file to the JavaScript file

Next, we add the above file to the list of imports in app/javascript/packs/app.js using import "../app.css";

The file should look like this:

// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.

import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"
import "../app.css"

Rails.start()
Turbolinks.start()
ActiveStorage.start()

Tailwind requires PostCSS 8, which is not currently available in Rails 6. We can fix the issue by uninstalling Tailwind and reinstalling using the compatibility build.

To fix it, we can run the following commands:

 $ npm uninstall tailwindcss postcss autoprefixer
 $ npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@7 autoprefixer@9

Sample application

Let’s look at a Ruby on Rails application that uses Tailwind CSS.

<%= form_with(model: course) do |form| %>
  <% if course.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(course.errors.count, "error") %> prohibited this course from being saved:</h2>

      <ul>
        <% course.errors.each do |error| %>
          <li><%= error.full_message %></li>
        <% end %>
      </ul>
    </div>
  <% end %>

  <div class="field font-black text-lg ml-3">
    <%= form.label :title %>
    <%= form.text_field :title %>
  </div>

  <div class="field font-black text-lg ml-3">
    <%= form.label :author %>
    <%= form.text_field :author %>
  </div>

  <div class="field font-black text-lg ml-3">
    <%= form.label :summary %>
    <%= form.text_field :summary %>
  </div>


  <div class="actions ml-3">
  <button class="bg-white hover:bg-gray-100 text-gray-800 font-semibold py-2 px-4 border border-gray-400 rounded shadow">
    <%= form.submit %>
    </button>
  </div>
<% end %>

RELATED TAGS

tailwind css
ruby on rails
ruby

CONTRIBUTOR

Maham Sawar
Copyright ©2022 Educative, Inc. All rights reserved
RELATED COURSES

View all Courses

Keep Exploring