Tailwind CSS is a different way of styling an HTML page. It is fair to claim that Tailwind CSS is improved inline-CSS. I was first skeptical about the Tailwind approach until I tried it myself for the first time.

The tailwindcss-rails gem was a great way to introduce Twilwind CSS to Rails projects. With Ruby on Rails 7 (alpha), we have a better way, and it supports Tailwind JIT, significantly improving the efficiency and developer experience.

DHH Introduction

The video "Alpha preview: Rails 7 w/ esbuild + Tailwind CSS" is a good video introducing you to libraries cssbundling-rails and jsbundling-rails. I followed the video and found some changes since Rails Alpha 2. I hope this post helps anyone who is interested in trying out the gem.

Prerequisites

The mechanics required to use cssbundling-rails is in Rails 7 master (alpha included). You will have to upgrade to Rails 7 and I am afraid the upgrade documentation is still a work in progress.

Instructions

Step 1: Add ` cssbundling-rails'library to your Gemfile. You might end up with a version v0.2.6 or newer.

./bin/bundle add cssbundling-rails

Step 2: Run the installer rails css:install:tailwind. In addition to Tailwind, it supports Bootstrap, Bulma, PostCSS and Sass.

./bin/rails css:install:tailwind

You will notice a console output similar to configurations running Webpacker and may take a couple of minutes to complete.

This process will add a Procfile.dev to your project. If you already have one it will append a new line to it.

Now you can run Rails, SCSS process and any other process with.

./bin/dev

If you are like me and upgrading your Rails and already have a Procfile.dev, you might encounter an error like this.

04:03:32 web.1     | started with pid 5950
04:03:32 sidekiq.1 | started with pid 5951
04:03:33 sidekiq.1 | 2021-11-25T04:03:33.561Z pid=5951 tid=2q3 WARN: OptionParser::InvalidOption: invalid option: --watch
04:03:33 sidekiq.1 | 2021-11-25T04:03:33.561Z pid=5951 tid=2q3 WARN: /home/vagrant/.rbenv/versions/3.0.2/lib/ruby/gems/3.0.0/gems/sidekiq-6.3.1/lib/sidekiq/cli.rb:312:in `parse_options'

Procfile correction:

# Problamatic Procfile.dev
web: bundle exec rails s -p 3000
sidekiq: bundle exec sidekiq -q default -q mailerscss: yarn build:css --watch

# Corrected Procfile.dev
web: bundle exec rails s -p 3000
sidekiq: bundle exec sidekiq -q default -q mailer
scss: yarn build:css --watch

Once done you should have Now add some Tailwind to a view of yours and you will notice the scss process compiling the CSS.

03:45:21 scss.1    |
03:45:21 scss.1    | Rebuilding...
03:45:21 scss.1    | Done in 36ms.

Finally: Add the following lines to any layout to get used Tailwind. The installation process inserts it to the application.html.erb layout automatically.

// app/views/layouts/marketing.html.erb

// Turbo enabled
<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>)

// Otherwise
<%= stylesheet_link_tag "application" %>)

Extra

Remove tailwindcss-rails gem

If you were using tailwindcss-rails gem before, you can now remove it from the Gemfile. You will also have to remove the related stylesheet tags from layouts.

// Remove
<%= stylesheet_link_tag "inter-font", "data-turbo-track": "reload" %>
<%= stylesheet_link_tag "tailwind", "data-turbo-track": "reload" %>

You can add interfont from its CDN:

 <link rel="stylesheet" href="https://rsms.me/inter/inter.css">

Add interfont to sans font family as follows:

const colors = require('tailwindcss/colors');
const defaultTheme = require('tailwindcss/defaultTheme');

module.exports = {
  mode: 'jit',
  purge: {
    enabled: true,
    content: [
      './app/views/**/*.html.{erb,slim}',
      './app/helpers/**/*.rb',
      './app/javascript/**/*.js',
    ],
  },
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter var', ...defaultTheme.fontFamily.sans],
      }
    }
  }
}

Enabling JIT

JIT should be by default enabled. Check the tailwind.config.js file and if it doesn't include mode: 'jit' add it.

const colors = require('tailwindcss/colors');
const defaultTheme = require('tailwindcss/defaultTheme');

module.exports = {
  mode: 'jit',    // this enables JIT
  purge: {.       // make sure to include all paths to views
    enabled: true,
    content: [
      './app/views/**/*.html.{erb,slim,haml}',
      './app/helpers/**/*.rb',
      './app/javascript/**/*.js',
    ],
  },
  theme: {
    extend: {}
  }
}

Trailblazer Support

I use Trailblazer by Nick and his team, an advanced business logic framework, on my Rails projects. You need to add the concepts directory to the Tailwind purge path list for the JIT compiler to do its magic.

const colors = require('tailwindcss/colors');
const defaultTheme = require('tailwindcss/defaultTheme');

module.exports = {
  mode: 'jit',
  purge: {
    enabled: true,
    content: [
      './app/views/**/*.html.{erb,slim}',
      './app/helpers/**/*.rb',
      './app/javascript/**/*.js',
      './app/concepts/**/*.slim'   // Trailblazer concept views (I use purely Slim)
    ],
  },
  theme: {
    extend: {}
  }
}