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

Once Bundle and Yarn have run take the steps below.

Change directories into the new project

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

Add the following node package

In your Gemfile, change the Webpacker gem

to

Run bundler

Install TailwindsCSS, PostCSS, Autopfrefixer and the Tailwind plugins

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

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

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

In postcss.config.js require TailwindCSS

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

Scaffold the TailwindCSS config.

Add the plugins to tailwind.config.js

And add the Inter font to tailwind.config.js

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

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

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

Now in your Terminal run

Then in another tab in your Terminal run

Then start the Rails server

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

--

--

Software Engineering Team Lead @ Prodigy Finance. All things Ruby on Rails.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
David Teren

Software Engineering Team Lead @ Prodigy Finance. All things Ruby on Rails.