December 10, 2020•
How to install Tailwind CSS v2.0 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.
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:
rails new tailwind_2 cd tailwind_2
The defaults that come with the framework here are perfectly fine.
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.
yarn add [email protected]:@tailwindcss/postcss7-compat [email protected]^7 [email protected]^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 [email protected] [email protected] [email protected]
Create your configuration file
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:
Include Tailwind CSS
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
Import the stylesheet inside your packs file of choice
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.
Require Tailwind CSS inside
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
Update your layout file
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
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.
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!