Back to blog overview

October 2, 2023

How to add TailwindCSS to Ruby on Rails

Jesse House


Sunjay Armstead

Senior Software Engineer
Prescott, AZ

TailwindCSS, when paired with Rails applications, offers numerous benefits that significantly elevate both the developer experience and the end-user interface. This article provides a comprehensive guide on integrating TailwindCSS into your Rails application.

## Sample application

For code references used in this article, [checkout the repo](

## NPM Package or Ruby Gem?

Your application's configuration typically dictates the choice between using the [tailwindcss-rails]( gem or the NPM package [tailwindcss](

- **When to use the NPM package:** in scenarios where you are rendering views via JavaScript on the client and using Webpack, esbuild, or Rollup to compile your JavaScript and other front end assets. [Tailwind has great documentation]( for setting up with NPM. You can also reference [our article]( about how to set up Tailwind with RedwoodJS.

- **When to use the gem:** opt for the gem when you're focusing on server-side rendering of views, particularly with ERB templates. This approach is streamlined and harmonizes well with the Rails asset pipeline. Typically Rails would be configured to use `importmap` for loading JavaScript packages. This article will focus on how to set up Tailwind using the Ruby gem.

## Setting up a new Rails application with the `tailwindcss-rails` gem

To configure a new Rails application with TailwindCSS, use:


rails new myapp --css tailwind


## Adding Tailwind to an existing Rails app

For pre-existing Rails applications, add the `tailwindcss-rails` gem to your `Gemfile`:


gem 'tailwindcss-rails'


Then, run:


bundle install

rails tailwindcss:install


Expect the install command to generate the following files:

- `app/assets/stylesheets/application.tailwind.css`

- `bin/dev`

- `config/tailwind.config.js`

- ``

## What's up with the `bin/dev` script?

The `bin/dev` script helps run development-related tasks concurrently using `foreman`.

The `` file contains a `tailwindcss:watch` entry. This process watches and compiles the Tailwind utility classes used in your `.erb` files. If this process isn't running, the styles won't render in the browser.

In the [sample application](, there's a notable change: transitioning from [foreman]( to [overmind]( Overmind offers better performance and debugging features than foreman. See [Jason Fleetwood-Boldt's post]( on the differences between Foreman and Overmind.

## Using scaffold with the Tailwind gem

One of the gems (pun intended!) of the `tailwindcss-rails` is its ability to style scaffolded views using Tailwind's utility classes. This means when you run:


rails generate scaffold Post title:string content:text


The views generated will be styled with Tailwind out of the box!

## Seamless integration with the asset pipeline

The `tailwindcss-rails` gem automatically integrates with the Rails asset pipeline. Therefore, production deployments are much easier since rails will precompile all of the Tailwind utitlity classes automatically.

## Final thoughts

Integrating the `tailwindcss-rails` gem into your Ruby on Rails applications is surprisingly simple. We hope you found this article helpful.

## Resources

Photo by Babatunde Olajide on Unsplash

Let's Chat

Are you ready to build something brilliant? We're ready to help.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
RedwoodJS Logo

for builders

Grants Pass, Oregon • September 26 - 29, 2023
View All