TailwindCSS 2.0 with Rails 6.1

UPDATE: See here for the updated post on how to setup Rails 6.1, TailwindCSS JIT, Webpacker & PostCSS 8

We will create a new app running Ruby on Rails 6.1 using Ruby 3.0.0 with TailwindCSS 2.0. In addition to the above we will setup the additional TailwindCSS plugins for forms, typography and aspect-ratio as well as the Inter var font. This setup also preps you app for use with TailwindUI.

This has been tested with Rails 6.1.0 running on Ruby 3.0.0.

Create a new Rails app.

Note that we skip the spring file watcher as we will use webpack-dev-server

rails new <app_name> -d postgresql --skip-spring

Once Bundle and Yarn have run take the steps below.

Change directories into the new project

cd <app_name>

Note at the time of writing Webpacker and PostCSS 8 are problematic so we will remove that from our app and point to the a known working release of Webpacker

Remove the Webpacker node package

yarn remove @rails/webpacker

Add the following node package

yarn add rails/webpacker#b6c2180

In your Gemfile, change the Webpacker gem

gem 'webpacker', '~> 5.0'

to

gem "webpacker", github: "rails/webpacker", ref: 'b6c2180'

Run bundler

bundle

Install TailwindsCSS, PostCSS, Autopfrefixer and the Tailwind plugins

yarn add tailwindcss postcss autoprefixer @tailwindcss/forms @tailwindcss/typography @tailwindcss/aspect-ratio

Now we need to run the following to create the application.scss in app/javascript/stylesheets

mkdir app/javascript/stylesheets && touch app/javascript/stylesheets/application.scss

In app/javascript/stylesheets/application.scss add the following

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

In `app/javascript/packs/application.js` add the following

require("stylesheets/application.scss")

In postcss.config.js require TailwindCSS

require('tailwindcss'),

Then add the stylesheet_pack_tag and Inter font to app/views/layouts/application.html.erb

<%= stylesheet_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
<link rel="stylesheet" href="https://rsms.me/inter/inter.css"

Scaffold the TailwindCSS config.

npx tailwindcss init --full

Add the plugins to tailwind.config.js

require('@tailwindcss/forms'),
require('@tailwindcss/typography'),
require('@tailwindcss/aspect-ratio'),

And add the Inter font to tailwind.config.js

'Inter var',

To test it’s all working let’s generate a page

rails g controller Home index

Add the following to app/views/home/index.html.erb

<div class="font-sans bg-white h-screen flex flex-col w-full">
 <div class="h-screen bg-gradient-to-r from-green-400 to-blue-500">
  <div class="px-4 py-48">
   <div class="relative w-full text-center">
    <h1
     class="animate-pulse font-bold text-gray-200 text-2xl mb-6">
    Your TailwindCSS setup is working if this pulses...
    </h1>
   </div>
  </div>
 </div>
</div>

Add the root path to point at the above /home/index in config/routes.rb

root 'home#index'

Now in your Terminal run

bin/webpack-dev-server

Then in another tab in your Terminal run

rails db:create db:migrate

Then start the Rails server

rails s

Open http://localhost:3000 in your browser

You should see the above pulsing text effect.

Here’s the repo for the above.

UPDATE: See here for the updated post on how to setup Rails 6.1, TailwindCSS JIT, Webpacker & PostCSS 8