Dismiss

Subscribe to the newsletter

December 10, 2020

5 responses

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.

See my previous guide

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 [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 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!

Leave a reply

Sign in or Sign up to leave a response.

5 responses

Ahmed
Icons/flag
Icons/link diagonal

Awesome video Andy.
When I tried to install Tailwind 2, I got error "zsh: no matches found: [email protected]^7"
I was able to fix is by escaping special character '^', as bellow.

yarn add [email protected]:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat [email protected]\^7 [email protected]\^9

Hope this helps anyone face such error.
Cheers👍🏼

Jared
Icons/flag
Icons/link diagonal

Thanks Ahmed - solved my problem👏

Andy Leverenz
Icons/flag
Icons/link diagonal

Thanks Ahmed! It looks as though this guide is already out of date 😆

Ahmed
Icons/flag
Icons/link diagonal

Not much I think. I have tested with the new MAGIC (as DHH call it) Hotwire Rails, and i had to update 'layout/applicaion.html.erb'. Here is tag:

`
Hotwire and Tailwind

<%= csrf_meta_tags %>
<%= csp_meta_tag %>

<%= yield :head %>
<%= turbo_include_tags %>
<%= stimulus_include_tags %>
<%= javascript_packs_with_chunks_tag 'application' %>  <<this is new
<%= stylesheet_packs_with_chunks_tag 'application' %> <<this is new



The new lines comes from
https://github.com/rails/webpacker#usage`.

Hope this helps...

rob
Icons/flag
Icons/link diagonal

Thank you for this article! I'm curious -- any reason why you didn't try to install Tailwindcss via tailwindcss-rails gem? https://github.com/rails/tailwindcss-rails

Est. reading time: 4 minutes
Stats: 7,345 views

Collection

Part of the Ruby on Rails collection