Using Tailwind CSS

With Ruby On Rails 6

Posted by Matthias Schmidt on February 9, 2020

For a new project I finally got a chance to explore Tailwind CSS. A utility-first CSS framework you’ve most likely heard of before.

Tailwind is build on top of the vast JavaScript tooling that is flourishing around Node.js. We are lucky to have support for that in Rails since the introduction of webpack in Rails 5.1.

I tried to find the smallest amount of steps needed to get Tailwind working in a fresh, yet deployable Rails 6 application. Tailwind generates a bazillion CSS classes, so clearing out all the unused ones is a must-do for production deployments and therefore included in the following steps via PurgeCSS.

Installing the needed tools

The following creates a new rails application with webpack included by default. I’m choosing PostgreSQL as database to allow deployments to Heroku right away. But feel free to pick something else.

$ rails new freshwind -d postgresql
$ cd freshwind
$ yarn add tailwindcss --dev
$ yarn add @fullhuman/postcss-purgecss --dev

I’m providing a Git patch at the end of this article you can apply right after rails new ....

PostCSS Configuration

From here on I’m basically following the official installation guide adjusted to Rails. PurgeCSS is only run on production builds. I’m still using regular Rails views in ./app/views/**/*.html.erb. Extend the content array with more paths for React, Vue, etc.

// postcss.config.js
const purgecss = require('@fullhuman/postcss-purgecss')({
  // Specify the paths to all of the template files in your project
  content: [
    './app/views/**/*.html.erb'
  ],

  // Include any special characters you're using in this regular expression
  defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
})

module.exports = {
  plugins: [
    require('postcss-import'),
    require('postcss-flexbugs-fixes'),
    require('tailwindcss')('./app/javascript/css/tailwind.js'),
    require('autoprefixer'),
    require('postcss-preset-env')({
      autoprefixer: {
        flexbox: 'no-2009'
      },
      stage: 3
    }),
    ...process.env.NODE_ENV === 'production'
      ? [purgecss]
      : []
  ]
}

Starting to use TailwindCSS

At this point TailwindCSS is installed. Let’s adjust the default Rails layout to start making use of it. In development stylesheet_pack_tag will return nil while all your CSS is delivered through the JS pack. You can control this with extract_css in webpacker.yml.

<!-- app/views/layouts/application.html.erb -->
<!-- ... -->
<%= stylesheet_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
<!-- ... -->
/* app/javascript/css/application.css */
/* purgecss start ignore */
@tailwind base;
@tailwind components;
/* purgecss end ignore */

@tailwind utilities;
// app/javascript/packs/application.js
// ...
import '../css/application.css'

Deployment to Heroku

Allow Heroku to make use of modules in devDependencies:

$ heroku config:set NPM_CONFIG_PRODUCTION=false

Git Patch

Apply everything mentioned here via patch file.

Download Git Patch