1. 安装
  2. 使用 Ruby on Rails 安装 Tailwind CSS

安装

使用 Ruby on Rails 安装 Tailwind CSS

在 Ruby on Rails v7+ 项目中设置 Tailwind CSS。

01

创建你的项目

如果你还没有设置项目,请先创建一个新的 Rails 项目。最常见的方法是使用 Rails 命令行

终端
rails new my-projectcd my-project
02

安装 Tailwind CSS

安装 tailwindcss-rubytailwindcss-rails gem,然后运行安装命令,在你的项目中设置 Tailwind CSS。

终端
./bin/bundle add tailwindcss-ruby -v 4.0.0.beta.9./bin/bundle add tailwindcss-rails./bin/rails tailwindcss:install
03

导入 Tailwind CSS

在位于 ./app/assets/stylesheets 目录中的 application.tailwind.css 文件中添加一个 @import,导入 Tailwind CSS。

application.tailwind.css
@import "tailwindcss";
04

启动构建过程

使用 ./bin/dev 运行你的构建过程。

终端
./bin/dev
05

在你的项目中使用 Tailwind

开始使用 Tailwind 的工具类来设置你的内容样式。

index.html.erb
<h1 class="text-3xl font-bold underline">  Hello world!</h1>
版权所有 © 2025 Tailwind Labs Inc.·商标政策