Erik Yuzwa

I'm a full stack web developer that aspires to write and gamedev.

Adding Tailwind CSS to Rails 6

04 March 2020

One common task when starting a new Rails application is to integrate with a CSS library or design framework. Because the CSS landscape has enjoyed quite a bit of expansion over the past few years, one of the more recent popular design frameworks is Tailwind CSS.

With that in mind, the focus of this tutorial is to go through the process of adding tailwindcss to your Rails 6 project.

Let’s dive in!

Assumptions & Goals

  • You are on a system that has Ruby on Rails 6 setup and available to you

Getting Started

Let’s begin at the beginning.

Open your shell and head to your favorite project directory. Then let’s rails new the project!

rails new use-tailwindcss
cd use-tailwindcss

add Tailwind CSS via Yarn

To help deal with CSS and JavaScript for your Rails application, a default Rails 6 project comes with 2 front end technologies: Yarn and Webpack.

Back on the command line, use Yarn to install Tailwind CSS.

yarn add tailwindcss

generate a Tailwind configuration file

Once yarn finishes installing everything, you need to create a new folder and file:

mkdir app/javascript/css
touch app/javascript/css/application.css

To the newly created application.css, you need to add some basic tailwindcss imports:

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

now make use of tailwind itself to generate a configuration file,

yarn tailwind init app/javascript/css/tailwind.js

updating the main application layout

With those updates to the CSS, it’s time to add a new stylesheet_pack_tag to the main application layout. Open app/views/layouts/application.html.erb, and add a new entry under the original two:

<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

updating the main javascript application pack

In order to ensure the new CSS files we’ve created make it into the application javascript pack, we need to add a reference to it.

Open up app/javascript/packs/application.js and add a new require at the end of the file:

require("../css/application.css")

updating the postcss.config.js

We’re almost done. Tailwind makes use of postcss, so we need to make some modifications to the postcss.config.js in your application root. Open it up and update it to look like the following:

module.exports = {
    plugins: [
        require('postcss-import'),
        require('postcss-flexbugs-fixes'),
        require('tailwindcss')('./app/javascript/css/tailwind.js'),
        require('autoprefixer'),
        require('postcss-preset-env')({
            autoprefixer: {
                flexbox: 'no-2009'
            },
            stage: 3
        })
    ]
};

generate a static home page

Let’s generate a static home page to verify our updated CSS setup.

rails g controller home index

Update the root Route in config/routes.rb to use the new static page:

Rails.application.routes.draw do

  root 'home#index'
end

Finally, let’s put some basic Tailwind specific CSS in the new app/views/home/index.html.erb view.

<nav class="bg-white px-8 pt-2 shadow-md">
  <div class="-mb-px flex justify-center">
    <a class="no-underline text-teal-dark border-b-2 border-teal-dark uppercase tracking-wide font-bold text-xs py-3 mr-8" href="#">
      Home
    </a>
    <a class="no-underline text-grey-dark border-b-2 border-transparent uppercase tracking-wide font-bold text-xs py-3 mr-8" href="#">
      About
    </a>
    <a class="no-underline text-grey-dark border-b-2 border-transparent uppercase tracking-wide font-bold text-xs py-3 mr-8" href="#">
      Pricing
    </a>
  </div>
</nav>

Mission Accomplished!

Where to next?