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.
Terminalrails new my-projectcd my-project
Install Tailwind CSS
Install the
tailwindcss-rails
gem, and then run the install command to generate atailwind.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 yourapplication.tailwind.css
file located in the./app/assets/stylesheets
directory.application.tailwind.css@tailwind base; @tailwind components; @tailwind utilities;
- Terminal
./bin/dev
- index.html.erb
<h1 class="text-3xl font-bold underline"> Hello world! </h1>