Adding Tailwind CSS to your Rails app

Today we are going to add the fantastic Tailwind CSS to our Rails project. I originally wrote this post in the Webpacker days, and it involved PostCSS compat packages, config files in strange places and a small prayer. Tailwind v4 plus Rails 8 has made the whole thing almost embarrassingly easy.

New app

If you are starting fresh, it’s one flag:

rails new myapp --css tailwind -d postgresql

Done. Skip to the bottom.

Existing app

Add the gem and run the installer:

bundle add tailwindcss-rails
bin/rails tailwindcss:install

This wires everything up - no Node required, the gem ships the standalone Tailwind CLI.

Where did the config file go?

If you last used Tailwind in the v2/v3 era, you’ll go looking for tailwind.config.js and not find it. Tailwind v4 is configured in CSS now. Your entry point lives at app/assets/tailwind/application.css and looks something like:

@import "tailwindcss";

@theme {
  --color-brand: #d9422e;
  --font-display: "Inter", sans-serif;
}

Custom colours, fonts, breakpoints - they all go in that @theme block as CSS variables. Honestly it’s nicer.

Running it

The installer creates a Procfile.dev that runs the Rails server and the Tailwind watcher together:

bin/dev

Use that instead of rails s during development and your classes compile as you save. Content detection is automatic in v4 too, so there’s no purge array to maintain - it just scans your project and strips unused classes on its own.

All that’s left to do now is try it out - sprinkle a class="text-3xl font-bold" on something and make sure it works.