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.

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
```
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
```

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: [],
}

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;
```
Start your build process
Run your build process with ./bin/dev.
Terminal
```
./bin/dev
```
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>
```

Create your project

Install Tailwind CSS

Configure your template paths

Add the Tailwind directives to your CSS

Start your build process

Start using Tailwind in your project