Install Tailwind CSS with Ruby on Rails

Setting up Tailwind CSS in Ruby on Rails v7+ 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 the tailwindcss-ruby and tailwindcss-rails gems, and then run the install command to set up Tailwind CSS in your project.

Terminal

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

Add an @import that imports Tailwind CSS to your application.tailwind.css file located in the ./app/assets/stylesheets directory.

application.tailwind.css

@import "tailwindcss";

Run your build process with ./bin/dev.

Terminal

./bin/dev

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

index.html.erb

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

Tailwind CSS 中文网（本网站）的目标是为中文开发者提供准确、及时的 Tailwind CSS 中文文档

Tailwind CSS 中文文档由本网站维护人员共同翻译，采用 MIT 开源协议发布

本网站与 tailwindcss.com 及 Tailwind Labs Inc. 并无从属关系

Tailwind 商标由 Tailwind Labs Inc. 所有