How to install Tailwind in Ruby on Rails

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.