The best way to run Tailwind CSS on Rails

Each time I go to startup a new Rails app for a side project I can’t remember how to set tailwind up correctly and end up looking through 3 or 4 different approaches until I find one that looks "correct".

With cssbundling-rails, this is now a thing of the past. The new (css|js)bundling-rails gems are super thin wrappers around setting up your own build task in package.json, and all it has to do is dump a file into app/assets/builds to be included via the asset pipeline.

What’s even handier though is tailwind is included out of the box using the new JIT mode.

Installation

All you have to do is add gem 'cssbundling-rails' to your Gemfile and then run

rails css:install:tailwind

After that, you will have a build:css script added to your package.json and a new binstub to run your Rails app alongside the tailwind JIT.

# Now you run rails with:
bin/dev

Extra credit: Using @imports with postcss

This is completely optional, but I have a few apps where I needed to write additional styles or wrap some tailwind components up using tailwinds @apply helper, so there’s a little extra step to get this working.

You need to add --postcss to your build:css script, so it will look something like:

{
  "scripts": {
    "build:css": "tailwindcss --postcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css"
  }
}

After that install a few dependencies:

yarn add postcss postcss-flexbugs-fixes postcss-import postcss-nested postcss-preset-env

And finally create a postcss.config.js in the root of your Rails app.

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

Now you can create components in app/assets/stylesheets/components/*.css and @import them in your main application.tailwind.css file.

Note: you may need to change the tailwind imports to use post css like so:

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