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

在 Rails 项目中使用 Tailwind CSS 的最快方法是使用 Tailwind CSS for Rails，通过运行 rails new my-project --css tailwind 命令。这将根据官方 Rails 示例自动配置您的 Tailwind 设置。如果您想手动配置 Tailwind，请继续阅读本指南的其余部分。

  1. 创建您的项目

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

    终端
    rails new my-projectcd my-project

  2. 安装 Tailwind CSS

    安装 tailwindcss-rails gem，然后运行安装命令以在 ./config 目录中生成 tailwind.config.js 文件。

    终端
    ./bin/bundle add tailwindcss-rails./bin/rails tailwindcss:install

  3. 配置您的模板路径

    将所有模板文件路径添加到 ./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: [],
}

  4. 将 Tailwind 指令添加到您的 CSS

    将 @tailwind 指令添加到 ./app/assets/stylesheets 目录中的 application.tailwind.css 文件中，用于 Tailwind 的每个层。

    application.tailwind.css
    @tailwind base;
@tailwind components;
@tailwind utilities;

  5. 启动您的构建过程

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

    终端
    ./bin/dev

  6. 开始在您的项目中使用 Tailwind

    开始使用 Tailwind 的实用程序类来设置您的内容样式。

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