How to install Tailwind CSS v2.0 using Ruby on Rails
Tags: tailwindcss, tutorial, ruby, rails
Published: 2020-12-17 21:42:05

---
title: How to install Tailwind CSS v2.0 using Ruby on Rails
published: true
date: 2020-12-10 16:01:18 UTC
tags: tailwindcss, tutorial, ruby, rails
canonical_url: https://web-crunch.com/posts/how-to-install-tailwind-css-2-using-ruby-on-rails
---

{% youtube Q1aTo2I6Dxc %} 

{% github https://github.com/justalever/install_tailwindcss_2_ror %}

This is an updated guide for installing Tailwind CSS v2.0. Tailwind CSS just launched a new design and [big update](https://tailwindcss.com) that includes features I'm excited to use.

[See my previous guide](https://dev.to/justalever/how-to-install-tailwind-css-using-ruby-on-rails-5d7m-temp-slug-6717589)

In this tutorial, I'll walk you through the steps for ensuring the current versions of Tailwind CSS and Ruby on Rails get along. We'll install Tailwind CSS and configure it as well.

### Create a new Ruby on Rails application

Before installing Tailwind CSS, I'm assuming you have a new or existing Rails app already installed. If not you can run:

```bash
rails new tailwind_2
cd tailwind_2
```

The defaults that come with the framework here are perfectly fine.

Here's a complete guide on installing Ruby on Rails if you are new to the framework entirely. ([Mac](https://gorails.com/setup/osx/10.15-catalina), [PC](https://gorails.com/setup/windows/10))

### Installing Tailwind CSS v2.0

Because the current version of Rails leverages PostCSS 7 we need to install some different node packages to provide the best compatibility possible.

```bash
yarn add tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
```

Once Rails gets an update on the PostCSS front you can revisit your Tailwind CSS installation and upgrade by running:

```bash
yarn remove tailwindcss @tailwindcss/postcss7-compat
yarn add tailwindcss@latest postcss@latest autoprefixer@latest
```

### Create your configuration file

With the node modules installed we can generate a new `tailwind.config.js` file.

```bash
npx tailwindcss init
```

That will create a new `tailwind.config.js` file at the root of your Ruby on Rails project.

That file can remain there but I like to move it into where we will be working more with our styles that Tailwind CSS brings us.

Inside `app/javascript/` I'll create a new folder called `stylesheets` and move the configuration file there.

Additionally I'll create a new `application.scss` stylesheet within `app/javascript/stylesheets`.

Our folder structure should resemble the following:

```bash
app/
  javascript/
    packs
    stylesheets/
    - application.scss
    - tailwind.config.js
```

### Include Tailwind CSS

Inside the `application.scss` we just create we will need to add these import statements for Tailwind to includes all of its defaults.

```css
/* app/javascript/stylesheets/application.scss */
@import "tailwindcss/base";
@import "tailwindcss/components";

/* Add any custom CSS here */
@import "tailwindcss/utilities";
```

You can add any custom CSS after the `components` import but before the `utilities` import.

### Import the stylesheet inside your packs file of choice

Ruby on Rails ships with an `application.js` file inside `app/javascript/packs`. You can add another file or import it inside `application.js` all the same. We'll need to import the `application.scss` file here and leverage Webpack loaders to compile things down.

```javascript
/* app/javascript/packs/application.js */

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")

import "stylesheets/application" // Add this line
```

### Require Tailwind CSS inside `postcss.config.js`

To add TailwindCSS to the Ruby on Rails project's `postcss.config.js` file you need to require it. You can then pass the relative path to your configuration file. Because I added our configuration in the folders within `app/javascript` I needed to pass the full relative URL `app/javascript/stylesheets/tailwind.config.js` to make this work.

```javascript
/* postcss.config.js */
module.exports = {
  plugins: [
    require("tailwindcss")("./app/javascript/stylesheets/tailwind.config.js"),
    require("postcss-import"),
    require("postcss-flexbugs-fixes"),
    require("postcss-preset-env")({
      autoprefixer: {
        flexbox: "no-2009",
      },
      stage: 3,
    }),
  ],
}
```

### Update your layout file

New Ruby on Rails projects doesn't assume you'll need to account for stylesheets in your `app/javascript` folder. As a result, we need to add a `stylesheet_pack_tag` to our project.

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Tailwind 2</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>
```

The `stylesheet_pack_tag` refers to the `application.scss` file we created and imported into the `application.js` file inside `app/javascript/packs`. Styles will be injected dynamically thanks to the default Webpack and PostCSS configuration that now comes by default in Rails 6 applications.

### Make sure you purge those files

Once you have Tailwind CSS up and running I highly recommend setting up the `purge` feature which is now built-in. Simply pass in the paths to files you use Tailwind CSS inside. The utility will traverse those files and remove any classes you aren't making use of.

This reduces file sizes and increases your website's performance dramatically.

```javascript
/* app/javascript/stylesheets/tailwind.config.js */
module.exports = {
  purge: [
    "./app/**/*.html.erb",
    "./app/helpers/**/*.rb",
    "./app/javascript/**/*.js",
    "./app/javascript/**/*.vue",
  ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}
```

### Final words

I hope this updated guide is useful if you are a Tailwind CSS user! I love working with Tailwind CSS and Ruby on Rails combined. Both frameworks enable me to move extremely fast and still be efficient as I build out more projects.

If you would like to learn more about Ruby on Rails, in particular, I made a complete course for beginners called [Hello Rails](https://hellorails.io). Check it out and [hit me up for a discount](https://web-crunch.com/contact/new) if you would like to pick it up!