How to add Tailwind UI to a Rails project

Tailwind UI has been getting a lot of very positive press recently from developers who don’t know enough CSS to want to roll their own styles for everything, but who care enough about control that they won’t want to use a more opinionated or high-level CSS framework.

We’re Rails developers who firmly believe CSS is an important and complicated part of web development, as such we want to offload lots of the CSS decision making onto people who actually know what they are doing, which is why we wanted to add a CSS framework to our standard toolkit.

After playing about with some and asking on social media, we settled on giving Tailwind UI a go.

Tailwind UI is a paid-for component library build on top of Tailwind CSS, a free set of utility classes. You can think of Tailwind CSS as a collection of utility classes and Tailwind UI as a set of patterns for using those classes.

We had a small internal Rails project that could do with some design attention, which was a perfect candidate for trying out Tailwind UI.

Our Setup

On this project we were using Rails 6.0.3 which didn’t have the webpacker gem installed. Some of the steps we had to follow included installing webpack, you can skip over these steps.

Webpack

Like most modern frontend tooling, things seem to go a lot smoother if you use Webpack. We decided it would be easier install Webpack on this project and move everything over to it instead of using the asset pipeline.

• Added webpacker to our Gemfile. gem 'webpacker'
• Ran bundle to install the gem bundle
• Ran the webpacker install script bundle exec rails webpacker:install

The install script will set up a lot of different files for you, to start using the generated packs we need to update our stylesheet_link_tag and javascript_include_tag to instead be stylesheet_pack_tag and javascript_pack_tag.

The diff on our project looked like this

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

TailWind UI

Now we can set up TailWind UI.

To install TailWind UI, we followed their documentation which said to:

• Install TailWind CSS with yarn yarn add tailwindcss@latest
• Install TailWind UI with yarn yarn add @tailwindcss/ui
• Created a settings file for TailWind app/javascript/stylesheets/tailwind.config.js

In the settings file we added:

module.exports = {
  plugins: [
    require('@tailwindcss/ui'),
  ]
}

We updated our app/javascript/packs/application.js file to have a single line in it;

import "stylesheets/application.scss"

Which meant we needed to create that file. Our app/javascript/stylesheets/application.scss file had the contents:

@tailwind base;
@tailwind components;
@tailwind utilities;

Looking at kickoff tailwind as a guide, I also went ahead and installed a tool to purge unused CSS yarn add @fullhuman/postcss-purgecss

Inside of a file created called postcss.config.js we added a reference to our tailwind config:

let tailwindcss = require('tailwindcss');

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

We’re ready to go

With the above changes in place we were ready to start using TailWind UI in our application. We tested by added some HTML with the TailWind CSS utility classes and could see the appropriate styling appear.