Question

Setting up Tailwind CSS in Ruby on Rails v7+ project.

The quickest way to start using Tailwind CSS in your Rails project is to use Tailwind CSS for Rails by running rails new my-project --css tailwind. This will automatically configure your Tailwind setup based on the official Rails example. If you'd like to configure Tailwind manually, continue with the rest of this guide.

1. Create your project

   Start by creating a new Rails project if you don't have one set up already. The most common approach is to use the Rails Command Line.

   Terminal

   rails new my-projectcd my-project

2. Install Tailwind CSS

   Install the tailwindcss-rails gem, and then run the install command to generate a tailwind.config.js file in the ./config directory.

   Terminal

   ./bin/bundle add tailwindcss-rails./bin/rails tailwindcss:install

3. Configure your template paths

   Add the paths to all of your template files to your ./config/tailwind.config.js file.

   tailwind.config.js

   /** @type {import('tailwindcss').Config} */
   module.exports = {
     content: [
       './public/*.html',
       './app/helpers/**/*.rb',
       './app/javascript/**/*.js',
       './app/views/**/*',
     ],
     theme: {
       extend: {},
     },
     plugins: [],
   }
   

4. Add the Tailwind directives to your CSS

   Add the @tailwind directives for each of Tailwind's layers to your application.tailwind.css file located in the ./app/assets/stylesheets directory.

   application.tailwind.css

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

5. Start your build process

   Run your build process with ./bin/dev.

   Terminal

   ./bin/dev

6. Start using Tailwind in your project

   Start using Tailwind's utility classes to style your content.

   index.html.erb

   <h1 class="text-3xl font-bold underline">
       Hello world!
   </h1>