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](https://github.com/CodingZeal/dont-bail-on-rails-tailwind).
## NPM Package or Ruby Gem?
Your application's configuration typically dictates the choice between using the [tailwindcss-rails](https://github.com/rails/tailwindcss-rails) gem or the NPM package [tailwindcss](https://github.com/tailwindlabs/tailwindcss).
## 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`:
Expect the install command to generate the following files:
## What's up with the `bin/dev` script?
The `bin/dev` script helps run development-related tasks concurrently using `foreman`.
The `Procfile.dev` 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](https://github.com/CodingZeal/dont-bail-on-rails-tailwind), there's a notable change: transitioning from [foreman](https://www.theforeman.org/) to [overmind](https://github.com/DarthSim/overmind). Overmind offers better performance and debugging features than foreman. See [Jason Fleetwood-Boldt's post](https://jasonfleetwoodboldt.com/courses/rails-7-crash-course/how-the-rails-procfile-works-foreman-overmind-hivemind/) 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.
Are you ready to build something brilliant? We're ready to help.