安装 - Tailwind CSS

综合指南

根据你正在使用的其他框架/工具，安装 Tailwind CSS 的过程可能会稍有不同，因此，我们整理了一些指南，涵盖了目前较流行的设置。

列表中没有你最喜欢的工具？我们一直在做新的指南，但同时你也可以按照将 Tailwind CSS 作为 PostCSS 插件安装，而不是立即进行设置。

将 Tailwind CSS 作为 PostCSS 插件安装

对于大多数实际项目，我们建议将 Tailwind 作为 PostCSS 插件安装。大多数现代框架已经使用了 PostCSS，而且很有可能你已经或正在使用其他 PostCSS 插件，例如 autoprefixer。

如果你从未听说过 PostCSS，或者想知道它和 Sass 之类的工具有何不同，请阅读使用 PostCSS 作为你的预处理器。

如果这对你来说有点困难，想在不配置 PostCSS 的情况下尝试 Tailwind，请阅读不配置 PostCSS 使用 Tailwind。

通过 npm 安装 Tailwind

对于大多数项目(以及利用 Tailwind 的定制特性)，需要通过 npm 安装 Tailwind 及其 peer-dependencies。

npm install tailwindcss@latest postcss@latest autoprefixer@latest

由于 Tailwind 在生成的 CSS 中不会自动添加前缀，所以我们建议安装 autoprefixer 来处理这个问题，如上面的代码片段中所示。

如果你将 Tailwind 与一个依赖于旧版本 PostCSS 的工具集成，你可能会看到如下错误：

Error: PostCSS plugin tailwindcss requires PostCSS 8.

在这种情况下，你应该改为安装 PostCSS 7 兼容版本。

将 Tailwind 添加为 PostCSS 插件

将 tailwindcss 和 autoprefixer 添加到你的 PostCSS 配置中。大多数情况下，这是项目根目录下的一个 postcss.config.js 文件，但也可以是一个 .postcssrc 文件或 package.json 文件中的 postcss key。

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

如果你不确定你所使用工具的 PostCSS 插件配置在哪，你可以参考这些工具的文档。搜索“configure postcss {你使用的工具}”也会很快得到答案。

如果你正在使用其他的 PostCSS 插件，则应该阅读使用 PostCSS 作为你的预处理器，来了解更多关于通过 Tailwind 使用它们的最佳方式的细节。

创建配置文件

如果你想自定义你的 Tailwind 安装，可以使用安装 tailwindcss npm 包时所包含的 Tailwind CLI 为你的项目生成一个配置文件：

npx tailwindcss init

这将在项目的根目录下创建一个极小的 tailwind.config.js 文件：

// tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

在配置文档中了解有关配置 Tailwind 的更多信息。

在 CSS 中包含 Tailwind

如果尚未创建 CSS 文件，那么就创建一个，并使用 @tailwind 指令注入 Tailwind 的 base、components和 utilities 样式：

/* ./your-css-folder/styles.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Tailwind 会根据你配置的设计系统，在构建时用它生成的所有样式替换这些指令。

如果你正在使用 postcss-import (或者一个在内部使用它的工具，如 Rails 的 Webpacker)，请使用我们的导入而不是 @tailwind 指令，以避免在导入任何你自己的附加文件时出现问题：

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

如果你使用的是像 React 或 Vue 这样的 JavaScript 框架，支持直接将 CSS 文件导入到 JS 中，那么你也可以不用创建 CSS 文件，直接导入已经有了这些指令的 tailwindcss/tailwind.css：

// app.js
import "tailwindcss/tailwind.css"

构建 CSS

实际构建项目的方式将取决于你正在使用的工具。你的框架可能包含一个类似 npm run dev 的命令来启动一个在后台编译 CSS 的开发服务器，你可能自己运行 webpack，或者你可能正在使用 postcss-cli 运行类似 postcss styles.css -o compiled.css 的命令。

如果你已经熟悉了 PostCSS，那么即使你不参考所用工具的文档，你也知道需要做什么。

在为生产环境进行构建时，确保配置 purge 选项，以删除任何未使用的 class，使文件更小：

  // tailwind.config.js
  module.exports = {
+   purge: [
+     './src/**/*.html',
+     './src/**/*.js',
+   ],
    darkMode: false, // or 'media' or 'class'
    theme: {
      extend: {},
    },
    variants: {},
    plugins: [],
  }

阅读生产优化，了解更多关于 tree-shaking 未使用的样式以获得最佳性能的信息。

如果你将 Tailwind 与一个依赖于旧版本 PostCSS 的工具集成在一起，那么你在构建 CSS 时可能会看到如下错误：

Error: PostCSS plugin tailwindcss requires PostCSS 8.

在这种情况下，你应该改为切换到我们的 PostCSS 7 兼容性版本。

直接使用 Tailwind 不配置 PostCSS

对于简单的项目或者只是试用一下 Tailwind，你可以使用 Tailwind CLI 工具来生成 CSS，而无需配置 PostCSS，甚至不需要安装 Tailwind 作为依赖。

使用和 npm 一起自动安装的工具 npx 来生成一个完全编译的 Tailwind CSS 文件：

npx tailwindcss-cli@latest build -o tailwind.css

这将创建一个基于 Tailwind 的默认配置生成的，名为 tailwind.css 的文件，并使用 autoprefixer 自动添加任何必要的前缀。

现在你可以将该文件像其他样式表一样放到 HTML 中：

<!doctype html>
<html>
<head>
  <!-- ... -->
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link href="/tailwind.css" rel="stylesheet">
</head>
<body>
  <!-- ... -->
</body>
</html>

使用自定义 CSS 文件

如果你想处理任何自定义 CSS 以及 Tailwind 生成的默认样式，在你平常放 CSS 的地方创建一个 CSS 文件，并使用 @tailwind 指令来包含 Tailwind 的 base、components 和 utilities 样式。

/* ./src/tailwind.css */
@tailwind base;
@tailwind components;

.btn {
  @apply px-4 py-2 bg-blue-600 text-white rounded;
}

@tailwind utilities;

然后在使用 npx tailwindcss build 构建 CSS 时包含该文件的路径：

npx tailwindcss-cli@latest build ./src/tailwind.css -o ./dist/tailwind.css

阅读添加基本样式、提取组件和添加新工具，了解更多关于在 Tailwind 上添加自定义 CSS 的知识。

自定义配置

如果你想自定义 Tailwind 生成的内容，可以使用 Tailwind CLI 工具创建一个 tailwind.config.js 文件：

npx tailwindcss-cli@latest init

这将在项目的根目录下创建一个极小的 tailwind.config.js 文件：

// tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

当使用 npx tailwindcss build 构建 CSS 时，将自动读取该文件：

npx tailwindcss-cli@latest build ./src/tailwind.css -o ./dist/tailwind.css

如果你想把配置文件放在其他位置或者使用其他名称，请在构建 CSS 时使用 -c 选项传递配置文件的路径：

npx tailwindcss-cli@latest build ./src/tailwind.css -c ./.config/tailwind.config.js -o ./dist/tailwind.css

在配置文档中了解有关配置 Tailwind 的更多信息。

生产环境构建

在为生产环境构建时，在构建 CSS 时在命令行上设置 NODE_ENV=production：

NODE_ENV=production npx tailwindcss-cli@latest build ./src/tailwind.css -o ./dist/tailwind.css

这将确保 Tailwind 删除所有未使用的CSS，并缩小 CSS 文件以获得最佳性能。阅读生产优化了解更多信息。

通过 CDN 使用 Tailwind

在使用 CDN 版本之前，请注意，如果没有将 Tailwind 整合到你的构建过程中，很多 Tailwind CSS 强大的功能都是不可用的。

为了充分使用 Tailwind，真的应该将 Tailwind 作为 PostCSS 插件安装。

为了快速演示或者只是试用一下，请通过 CDN 获取最新的默认配置：

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

请注意，虽然 CDN 版本非常大(压缩后73.2kB，未压缩3020.7kB), 但当你将 Tailwind 作为构建过程的一部分时，它并不代表你所看到的大小.

遵循最佳实践的网站几乎都压缩在 10kb 以下。

HTML 模板

为了能让 Tailwind 的样式按预期工作，你需要使用 HTML5 文档类型，并包括响应式 viewport meta tag 来正确处理所有设备上的响应式样式。

<!doctype html>
<html>
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link href="/path/to/tailwind.css" rel="stylesheet">
  <!-- ... -->
</head>
<body>
  <!-- ... -->
</body>
</html>

许多前端框架，比如Next.js，vue-cli等，会在后台自动完成所有的这些工作，因此，根据你要构建的内容，可能不需要进行这些设置。

PostCSS 7 兼容性版本

从 2.0 版本开始，Tailwind CSS 依赖于 PostCSS 8。由于 PostCSS 8 刚发布了几个月，所以生态系统中的许多其他工具尚未更新，这就意味着在安装 Tailwind 并尝试编译 CSS 后，你可能会在终端上看到如下错误：

Error: PostCSS plugin tailwindcss requires PostCSS 8.

为了在所有人都更新之前缩小差距，我们还在 npm 的 compat 发布了一个兼容 PostCSS 7 的版本。

如果遇到上述错误，请卸载 Tailwind 并使用兼容性版本重新安装：

npm uninstall tailwindcss postcss autoprefixer
npm install tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

兼容性版本和主版本在各个方面都是相同的，所以你不会错过任何新功能。

一旦你的其他工具都添加了对 PostCSS 8 的支持，你就可以通过使用 latest 标签重新安装 Tailwind 及其 peer-dependencies 并移除兼容性版本：

npm uninstall tailwindcss @tailwindcss/postcss7-compat
npm install tailwindcss@latest postcss@latest autoprefixer@latest

安装