Tailwind CSS home page
  1. Installation
  2. Install Tailwind CSS with Ruby on Rails

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>