Add Tailwind CSS to a Rails app

Photo by Simon Fitall on Unsplash

In this post, I walk through a minimal set of necessary steps to get Tailwind CSS v2 working with Webpacker in a Rails 6.1 app.

I read several posts on the topic and each was incomplete. This is what worked for me.

Assumptions

You already have a Rails 6 app created and running locally. It is configured to run Webpacker.

If those things aren't true, you'll need to get those in place for the rest of this post to make sense.

Install Tailwind

You'll need to install Tailwind as well as PostCSS and Autoprefixer. Webpacker is tied to PostCSS v7, so you'll need to install a compat version of Tailwind. The PostCSS and Autoprefixier versions will need to be tied back as well.

Use yarn (or npm) from the base directory of your Rails project to install these dependencies:

$ yarn add tailwindcss@compat postcss@^7 autoprefixer@^9

You should now have the following dependencies (among others) in your package.json:

  "dependencies": {
    "autoprefixer": "^9",
    "postcss": "^7",
    "tailwindcss": "^2.0.1-compat"
  }

Sprinkle in some CSS

Before we get into the rest of the CSS, let's add the Tailwind directives to a CSS file as well as a bit of CSS that will really stand out once everything is wired up. That way we'll clearly see when Tailwind is working.

First, create a directory for the stylesheet. This will live in the javascript directory since we want Webpacker to be in charge of of bundling it.

$ mkdir app/javascript/stylesheets

Then create the application.css file in that new directory (app/javascript/stylesheets/application.css) with the Tailwind directives:

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

body {
  @apply bg-red-300;
}

It's necessary to use this style of import for the directives rather than the ones you may be used to from other contexts (@tailwind base;). This is because Webpacker uses postcss-import under the hood.

Notice, I've also added a bit of red flare to the body element. Once everything is wired up correctly, we'll see the background of any of our app pages turn light red.

If we load a page now, we'll see now change. Our app doesn't know to load, bundle, and apply Tailwind styles yet.

Configuration

There are two configuration files we'll need to add or update. You should already have a postcss.config.js file. Open it up and add the following two lines to the plugins array:

    require('tailwindcss')('./tailwind.config.js'),
    require('autoprefixer'),

Notice how that first line references tailwind.config.js. That's the config file we need to add. We can autogenerate a base version of it with the following npx command:

$ npx tailwindcss init

That command creates the tailwind.config.js file, but there is nothing else we need to do with it now. Later on, you can customize Tailwind by adding config options to that file.

Look Out Webpacker

The last thing we need to do is tell Webpacker where to look for our new application.css file and then include the bundled pack in any layouts we want.

Open up app/javascript/packs/application.js and import the new CSS file:

// other imports ...
import "stylesheets/application.css"

Remember, application.css contains any custom CSS we want as well as the Tailwind directives. Importing it will tell Webpacker to bundle it all together.

Next, we have to get this bundled CSS included in an HTML file somewhere. You can pick and choose layouts, but likely you'll want Tailwind included on all your pages. For that, we'll add a stylesheet_pack_tag line to our app/views/layouts/application.html.erb file.

    <%= stylesheet_link_tag 'application', media: 'all' %>
    <%= stylesheet_pack_tag 'application' %>
    <%= javascript_pack_tag 'application' %>

Here I've nestled it right between two other tags. Note: your file might look a little different if you're already including other script tags, no worries, just add it in with the rest. Also, if you're using Turbolinks, be sure to emulate the data attributes from the other tags.

(Re)Fresh

At this point everything should be wired up. Go back to your browser and refresh that page. See the red background? Great!

Feel free to remove the red background now and have fun building with Rails and Tailwind.

If you enjoyed this post, join my newsletter to get a direct line on more stuff like this.