DEV Community

Cover image for The best way to run Tailwind CSS on Rails
Pete Hawkins
Pete Hawkins

Posted on • Updated on

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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"
  }
}
Enter fullscreen mode Exit fullscreen mode

After that install a few dependencies:

yarn add postcss postcss-flexbugs-fixes postcss-import postcss-nested postcss-preset-env
Enter fullscreen mode Exit fullscreen mode

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,
    }),
  ],
};
Enter fullscreen mode Exit fullscreen mode

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";
Enter fullscreen mode Exit fullscreen mode

Discussion (4)

Collapse
davidlowry profile image
David Lowry

Looking forward to ripping webpack out of some major projects - need a quiet week or two planned to take that leap though! At least getting Postcss8, Tailwind2 + JIT running has become easier recently

Collapse
phawk profile image
Pete Hawkins Author

I hope this helps you get set up with Rails and tailwind that little bit easier. These new approaches to assets are going to ship with Rails 7 and replace webpacker, which I think is great and a much more Rails like way of doing things.

Collapse
timur profile image
Timur

How do I add tailwind plugins?

Collapse
phawk profile image
Pete Hawkins Author

Hey Timur, the same way you would normally, installing via cssbundler-rails will generate a tailwind.config.js in your project, so yarn install the plugin and then add it to your config.

Hope that helps!