Tailwind and Rails

Tailwind is a really nice set of CSS utility classes that let you style up a page staying largely in one file at a time. Rails has it's own wild way of dealing with javascript, so lets go through how to make them play well together.

Install tailwindcss

Make sure that you have node 12.13 or higher:

1
node -v

If not, then upgrade node.

Inside of your rails project, install tailwind. We need to use the PostCSS 7 compatibility build at this time since not all of our plugins are updated.

1
yarn add tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

Then we create a directory app/javascript/stylesheets that we will have tailwind use. Create a file app/javascript/stylesheets/application.scss and import the tailwind components. If you need to extract and apply different components you can do it here.

1
2
3
4
5
6
@import "tailwindcss/base";
@import "tailwindcss/components";

// You can add your own custom components/styles here

@import "tailwindcss/utilities";

Finally, we need to add tailwindcss to the postcss pipeline. In postcss.config.js:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
module.exports = {
    plugins: [
        require('tailwindcss'),
        require('autoprefixer'),
        require('postcss-import'),
        require('postcss-flexbugs-fixes'),
        require('postcss-preset-env')({
            autoprefixer: {
                flexbox: 'no-2009'
            },
            stage: 3
        })
    ]
}

Configuring webpacker

First we need to tell app/javascript/packs/application.js to use the new sass sheet:

1
2
// Put this at the end
require("stylesheets/application.scss")

And then add the stylesheet_pack_tag to your layout

In app/views/layouts/application.html.erb:

1
2
        <!-- This refers to app/javascript/stylesheets/application.scss-->
        <%= stylesheet_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

And then update the body style with a little tailwind goodness, so we can test it out:

1
    <body class="bg-gray-100 text-white-900 w-3/4 mx-auto p-4">

Which we can do by creating a simple route:

1
rails g controller home index

And in config/routes.rb add a

Which will let you see the generated javascript in real life by starting up rails and going to http://localhost:3000

Setting up production purging

We're going to follow tailwind purgecss directions and create a tailwind.config.js file.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
module.exports = {
  purge: [
    './app/**/*.html',
    './app/**/*.erb',
    './app/**/*.vue',
    './app/**/*.jsx',
  ],
  theme: {},
  variants: {},
  plugins: [],
}

Add in any additional filetypes depending upon which templating system you are using.

Customizing the theme

Tailwind has a lot of ways to change the theme, but lets walk through how to add a different font for the site.

First we'll add a font via npm, from the fontsource project.

1
yarn add fontsource-dosis

Then, we need to tell webpacker to include it, which is driven off of app/assets/javascripts/pack/application.js. Add the required require:

1
require('fontsource-dosis')

Then we are need to tell tailwind to use this new font. First we import the default theme, and then we'll add our new fontFamily to the front:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
const defaultTheme = require("tailwindcss/defaultTheme");

module.exports = {
    purge: {
         content: [
            './app/**/*.html',
            './app/**/*.erb',
            './app/**/*.vue',
            './app/**/*.jsx',
        ]},
    theme: {
        extend: {
            fontFamily: {
                sans: ["Dosis", ...defaultTheme.fontFamily.sans]
            }
        }
    },
    variants: {},
    plugins: [],
}

Note that rails is only checking to see if the application.js file has changed inside of the app/assets folder, so if you make a change to the tailwind.config.js file you need to touch application.js to trigger a rebuild.

Tailwind and Rails

Install tailwindcss

Configuring webpacker

Setting up production purging

Customizing the theme

References