Add Tailwind CSS to a Rails app
Tags: rails, tailwindcss, css
Published: 2021-01-22 03:08:34

<em><span>Photo by <a href="https://unsplash.com/@simonfitall?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Simon Fitall</a> on <a href="https://unsplash.com/s/photos/prop-plane?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></span><em>

In this post, I walk through a minimal set of necessary steps to get [Tailwind CSS v2](https://tailwindcss.com/) working with [Webpacker](https://github.com/rails/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`:

```javascript
  "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](https://tailwindcss.com/docs/installation#include-tailwind-in-your-css):

```css
@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:

```javascript
    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](https://tailwindcss.com/docs/installation#create-your-configuration-file):

```
$ 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:

```javascript
// 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.

```erb
    <%= 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](https://crafty-builder-6996.ck.page/e169c61186
) to get a direct line on more stuff like this._