示例代码

要运行示例应用程序，我们需要下载以下代码。

对于 Rails 版本（位于主目录中），我们需要在系统上安装 Ruby 3.0 和 SQLite。在示例代码目录中运行 bin/setup 将加载 Rails 相关部分。接下来，启动 rails 服务器即可加载应用程序，我们应能通过 http://localhost:3000 访问网站。示例页面位于 http://localhost:3000/intro、http://localhost:3000/box 和 http://localhost:3000/page。

对于 React 版本（位于 react_create_app 目录中），我们需要安装 npm 和 yarn。安装完成后，运行 yarn install 将安装所有必需的模块，然后运行 yarn start 启动开发服务器。所有示例均可通过 http://localhost:3000 访问，我们可以在 src/App.js 文件中查看组件内的基础 HTML。

注意：这里没有真正的应用程序。你应该能够从零开始，在任意构建工具的空白项目中安装 Tailwind，并跟随 HTML 示例进行操作。

Tailwind 既是一组实用类，也是一种 CSS 预处理器，用于生成这些 CSS 类，并支持使用额外的 CSS 工具，如 @apply 指令。我们需要安装框架本身，并将其集成到我们的 CSS 处理工具链中。

安装示例代码

这是与之关联的一小段示例代码。它主要是构建整个 Tailwind 图像所需的 HTML 标记。我们有两种选择——一个 React 版本 和一个 Rails 版本。

react-create-app 文件夹中的代码可能是最容易运行的。该代码运行一个使用 react-create-app 创建的小型应用，并根据 Tailwind CSS 网站 的说明调整以处理 Tailwind。该代码还将所有示例 HTML 添加到 App.js 文件中。

若你已安装 Node 以及 npm 或 yarn，请进入该目录，运行 npm install 或 yarn install，然后运行 npm start 或 yarn start，接着在浏览器中输入 http://localhost:3000。

如果你熟悉设置 Rails 项目，并且使用的是 macOS 或 Linux 机器，则主目录中提供了示例应用程序的 Rails 版本。为此需要安装 Ruby 和 SQLite。我们可以通过进入主目录，运行 bin/setup，然后运行 rails server，并在浏览器中输入 http://localhost:3000/intro、http://localhost:3000/box 和 http://localhost:3000/page 来安装该应用。

由于示例应用程序非常小，我们可以轻松地从 React 版本的 App.js 文件或 Rails 版本的 app/views/home 目录中提取 HTML 标记，并将其添加到任何已安装 Tailwind 的服务器设置中。

将 Tailwind 添加到你的应用中

安装 Tailwind 的过程取决于你的项目如何管理客户端资源。本节将概述大多数项目中安装 Tailwind 的通用方法。

Tailwind 开发者建议在大多数项目中将 Tailwind 作为 PostCSS 的插件安装，PostCSS 是一种通用的 CSS 处理 工具。使用你的包管理器安装 tailwindcss、postcss 和 autoprefixer：

1$ yarn add tailwindcss postcss autoprefixer

接下来，进入你的 PostCSS 配置文件，对于 Rails 项目是 postcss.config.js，但在其他设置中也可能是 .postcssrc。你需要将 tailwindcss 和 autoprefixer 添加为插件：

main/postcss.config.js

1module.exports = {
2  plugins: [
3    require('postcss-import'), 
4    require('postcss-flexbugs-fixes'), 
5    require('postcss-preset-env')({
6      autoprefixer: { flexbox: 'no-2009' },
7      stage: 3
8    }),
9    require('tailwindcss'),
10    require('autoprefixer')
11  ]
12}

接下来，运行以下命令以创建 Tailwind 配置文件：

1$ npx tailwindcss init

这将创建以下空配置文件：

main/tailwind.config.js

1module.exports = {
2  purge: [],
3  darkMode: false, // or 'media' or 'class'
4  theme: {
5    extend: {},
6  },
7  variants: {
8    extend: {},
9  },
10  plugins: [],
11}

从技术上讲，你至少目前不需要配置文件，但不加也无妨。此外，如果你使用 Visual Studio Code，Tailwind 插件会利用配置文件来判断项目是否使用 Tailwind。其他集成开发环境（IDE）和编辑器也有各种插件和其他形式的 Tailwind 支持。最后，我们需要将 Tailwind 添加到我们的 CSS 文件中。如果你使用 webpack，则应在导入的 CSS 文件中加入以下行。在 Rails 中，默认文件是 app/javascript/packs/application.css，我们希望它看起来像这样：

main/app/javascript/packs/application.scss

1@import "tailwindcss/base"; 
2@import "tailwindcss/components"; 
3@import "tailwindcss/utilities";

在这里，我们分三层导入 Tailwind。基础层包含 Tailwind 的重置类。接下来是组件层，这是一个包含 Tailwind 组件类的小层，最后是实用程序层。当你自定义 Tailwind 时，这些层级变得重要。如果你想使用 Tailwind 前缀组合类，它们必须在实用程序层之前定义。

其他构建系统可能使用 @tailwind 而非 @import 作为指令（请以官方文档为准）。