Setting Up Rails 6.1 + Tailwind CSS 2.2 with JIT

I’m going to show you how to create a project with Rails 6.1 and its default Webpacker version (4.5), and configure Tailwind CSS with its dependencies and JIT mode enabled.

You’ll end up with a project that compiles the final CSS automatically, and refreshes the browser for you as well, after every change.

Create a Rails application:

rails new tailwind-jit-rails

Install the Tailwind CSS dependencies. Open the terminal and run:

yarn add @fullhuman/postcss-purgecss@^4 postcss@^8 postcss-loader@^4 autoprefixer@^10 tailwindcss@^2

Create the file app/javascript/stylesheets/application.scss (you will have to create the stylesheets directory).

Now open application.scss and add the Tailwind CSS directives:

@tailwind base;
@tailwind components;
@tailwind utilities;

Remember that this is an SCSS file, so you can add here the SCSS code you need later.

Open app/javascript/packs/application.js and add this import to include the new application.scss:

import "stylesheets/application.scss"

Put that line below the last import (channels).

Open postcss.config.js and add this require at the beginning of the plugins array, just before the first require:

require('tailwindcss')

Open app/views/layouts/application.html.erb and add this before stylesheet_link_tag:

<%= stylesheet_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

So it will look like this:

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

Now you can create the Tailwind CSS configuration file in the terminal:

npx tailwindcss init

Enable JIT mode and configure the purge option so that it looks like this:

mode: 'jit',
purge: [
  './app/views/**/*.html.erb',
  './app/helpers/**/*.rb',
  './app/javascript/**/*.js',
],

To prevent Webpacker from generating a rather annoying warning message, open babel.config.js and add this at the bottom, just before the closing ].filter(Boolean):

['@babel/plugin-proposal-private-methods', { loose: true }],
['@babel/plugin-proposal-private-property-in-object', { loose: true }]

Remember to add a comma to the previous element. It will look like this:

[
'@babel/plugin-transform-regenerator',
  {
    async: false
  }
],
['@babel/plugin-proposal-private-methods', { loose: true }],
['@babel/plugin-proposal-private-property-in-object', { loose: true }]

Finally, to get Webpacker 5 to work with PostCSS 8 we need to add a small hack. Open config/webpack/environment.js and add this before module.exports = environment:

That’s it!

If you want to test if it works, create a test controller:rails g controller Home index

Add the root in config/routes.rb:

root 'home#index'

Open app/views/home/index.html.erb and create an H1 like this:

<h1 class="font-bold text-4xl text-center text-red-500">Hello World!</h1>

Now open the Webpacker server in a terminal tab:

bin/webpack-dev-server

And the Rails server in another tab:

bin/rails s

Open your browser and load localhost:3000

You should see a big, red Hello World!

Try making changes, and you’ll see how fast it compiles and refreshes the browser.

As an additional note, for the Tailwind CSS IntelliSense extension to work in html.erb files you must open the preferences and look for the files.associations option. Click the Add Item button and add *.html.erb as item, and html as value.

If you liked the article, and don’t have time to research and study the framework, I recommend my Tailwind CSS course on Udemy, where I explain, to the point, how to use the framework.

I also teach you how to use the 4 official plugins, saving you a lot of work.

Enjoy!