在 Ruby on Rails 中安装 Tailwind CSS

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.

创建你的项目
如果你还没有创建 Rails 项目，可以先创建一个新的项目。最常用的方法是使用 Rails 命令行。
终端
```
rails new my-projectcd my-project
```
安装 Tailwind CSS
安装 tailwindcss-rails gem，然后运行安装命令，在 ./config 目录下生成 tailwind.config.js 文件。
终端
```
./bin/bundle add tailwindcss-rails./bin/rails tailwindcss:install
```

配置你的模板路径

将所有模板文件的路径添加到你的 ./config/tailwind.config.js 文件中。

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './public/*.html',
    './app/helpers/**/*.rb',
    './app/javascript/**/*.js',
    './app/views/**/*',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

将 Tailwind 指令添加到你的 CSS 中
在位于 ./app/assets/stylesheets 目录下的 application.tailwind.css 文件中，为 Tailwind 的每一层添加 @tailwind 指令。
application.tailwind.css
```
@tailwind base;
@tailwind components;
@tailwind utilities;
```
开始构建流程
使用 ./bin/dev 运行你的构建流程。
终端
```
./bin/dev
```
开始在你的项目中使用 Tailwind
开始使用 Tailwind 的工具类来为你的内容添加样式。
index.html.erb
```
<h1 class="text-3xl font-bold underline">
    Hello world!
</h1>
```

创建你的项目

安装 Tailwind CSS

配置你的模板路径

将 Tailwind 指令添加到你的 CSS 中

开始构建流程

开始在你的项目中使用 Tailwind