December 10, 2020
•Last updated November 5, 2023
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.
Here's a complete guide on installing Ruby on Rails if you are new to the framework entirely. (Mac, PC)
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 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
Create your configuration file
With the node modules installed we can generate a new tailwind.config.js file.
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.
Inside app/javascript/ I'll create a new folder called stylesheets and move the configuration file there.
Additionally I'll create a new application.scss stylesheet within app/javascript/stylesheets.
Our folder structure should resemble the following:
app/
javascript/
packs
stylesheets/
- application.scss
- tailwind.config.js
Include Tailwind CSS
Inside the application.scss we just create we will need to add these import statements for Tailwind to includes all of its defaults.
/* app/javascript/stylesheets/application.scss */
@import "tailwindcss/base";
@import "tailwindcss/components";
/* Add any custom CSS here */
@import "tailwindcss/utilities";
You can add any custom CSS after the components import but before the utilities import.
Import the stylesheet inside your packs file of choice
Ruby on Rails ships with an application.js file inside app/javascript/packs. You can add another file or import it inside application.js all the same. We'll need to import the application.scss file here and leverage Webpack loaders to compile things down.
/* app/javascript/packs/application.js */
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
import "stylesheets/application" // Add this line
Require Tailwind CSS inside postcss.config.js
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 app/javascript I needed to pass the full relative URL app/javascript/stylesheets/tailwind.config.js to make this work.
/* postcss.config.js */
module.exports = {
plugins: [
require("tailwindcss")("./app/javascript/stylesheets/tailwind.config.js"),
require("postcss-import"),
require("postcss-flexbugs-fixes"),
require("postcss-preset-env")({
autoprefixer: {
flexbox: "no-2009",
},
stage: 3,
}),
],
}
Update your layout file
New Ruby on Rails projects doesn't assume you'll need to account for stylesheets in your app/javascript folder. As a result, we need to add a stylesheet_pack_tag to our project.
<!DOCTYPE html>
<html>
<head>
<title>Tailwind 2</title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<%= yield %>
</body>
</html>
The stylesheet_pack_tag refers to the application.scss file we created and imported into the application.js file inside app/javascript/packs. Styles will be injected dynamically thanks to the default Webpack and PostCSS configuration that now comes by default in Rails 6 applications.
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.
/* app/javascript/stylesheets/tailwind.config.js */
module.exports = {
purge: [
"./app/**/*.html.erb",
"./app/helpers/**/*.rb",
"./app/javascript/**/*.js",
"./app/javascript/**/*.vue",
],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
Final words
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!
Categories
Collection
Part of the Ruby on Rails collection
Products and courses
-
Hello Hotwire
A course on Hotwire + Ruby on Rails.
-
Hello Rails
A course for newcomers to Ruby on Rails.
-
Rails UI
UI templates and components for Rails.
