How to install Tailwind CSS v2.0 using Ruby on Rails
This repo is a quick guide for installing Tailwind CSS v2.0 on Ruby on Rails. Tailwind CSS was recently released so I wanted to do an updated guide. Find the blog post here and the YouTube video tutorial here.
For a look at an older guide check out How to install Tailwind CSS using Ruby on Rails
This is an updated guide for installing Tailwind CSS v2.0. Tailwind CSS just launched a new design and big update that includes features I'm excited to use.
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.
Before installing Tailwind CSS, I'm assuming you have a new or existing Rails app already installed. If not you can run:
rails new tailwind_2 cd tailwind_2
The defaults that come with the framework here are perfectly fine.
Because the current version of Rails leverages PostCSS 7 we need to install some different node packages to provide the best compatibility possible.
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:
yarn remove tailwindcss @tailwindcss/postcss7-compat yarn add tailwindcss@latest postcss@latest autoprefixer@latest
With the node modules installed we can generate a new
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.
stylesheets and move the configuration file there.
Additionally I'll create a new
application.scss stylesheet within
Our folder structure should resemble the following:
application.scss we just create we will need to add these import statements for Tailwind to includes all of its defaults.
You can add any custom CSS after the
components import but before the
Ruby on Rails ships with an
application.js file inside
application.js all the same. We'll need to import the
application.scss file here and leverage Webpack loaders to compile things down.
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
New Ruby on Rails projects doesn't assume you'll need to account for stylesheets in your
stylesheet_pack_tag to our project.
stylesheet_pack_tag refers to the
application.scss file we created and imported into the
application.js file inside
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.
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. Check it out and hit me up for a discount if you would like to pick it up!