tailwindcss 官网（一）安装、使用预处理器

tailwindcss 官网（一）安装、使用预处理器

官网：安装 - Tailwind CSS 中文文档

1. 安装

学习如何在您的工程中使用 Tailwind CSS

集成指南

对于不同的框架/工具，安装 Tailwind CSS 是完全不同的过程，所以我们整理了一份常见安装的指南集合。

Next.js

Vue 3 (Vite)

Laravel

Nuxt.js

Create React App

Gatsby

没有在列表中看到您的工具？我们一直在扩充新的指南，同时您也可以按照 以 PostCSS 插件的形式安装 Tailwind CSS 的文档来安装。

---

以 PostCSS 插件的形式安装 Tailwind CSS

对于大多数现实中的工程，我们建议作为一个 PostCSS 插件来安装 Tailwind。大多数的现代框架基本都默认使用了 PostCSS，您很可能已经使用或当前正在使用其它 PostCSS 插件，例如 autoprefixer.

如果您从没有听说过 PostCSS，或者很想知道它与其它工具，如 Sass 的区别，请阅读我们的指南：将 PostCSS 用作预处理器。

如果您觉得这有些麻烦，并且想在不配置 PostCSS 的情况下尝试使用 Tailwind，请阅读有关在 不依赖 PostCSS 使用 Tailwind 的说明。

通过 npm 安装 Tailwind

对于大多数项目（并利用 Tailwind 的自定义功能），您需要通过 npm 安装 Tailwind 及其依赖项。

npm install tailwindcss@latest postcss@latest autoprefixer@latest

由于 Tailwind 不会自动添加浏览器引擎前缀到生成的 CSS 中，我们建议您安装 autoprefixer 去处理这个问题，就像上面的代码片段所展示的那样。

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

Error: PostCSS plugin tailwindcss requires PostCSS 8.

在这种情况下，您应该安装 PostCSS 7 兼容性版本。

作为 PostCSS 插件来添加 Tailwind

将 tailwindcss 和 autoprefixer 添加到您的 PostCSS 配置中。 多数情况下，这是项目根目录下的 postcss.config.js 文件，但也可能是 .postcssrc 文件或是由 package.json 文件中的 postcss 键所指定。

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

如果您不太清楚如何在您正在使用的工具如何配置 PostCSS，则需要参考一下这些工具的文档。搜索 ”configure postcss {我的工具名字}” 也将很快为您提供答案。

如果您使用的是其他 PostCSS 插件，则应阅读有关将 PostCSS 用作预处理器的文档，以获取有关与 Tailwind 集成在一起的最佳实践的详细信息。

创建您的配置文件

如果您想要自定义您的 Tailwind 安装，可以使用 Tailwind CLI 工具生成一份配置文件，这个命令行工具已包含在了 tailwindcss 这个 npm 包里了。

npx tailwindcss init

这将会在您的工程根目录创建一个最小的 tailwind.config.js 文件。

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

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

包含 Tailwind 到您的 CSS 中

如果您尚未创建一个 CSS 文件，请使用 @tailwind 指令注入 Tailwind 的基础 (base)，组件 (components) 和功能 (utilities) 样式：

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

Tailwind 将在构建时将这些指令替换为基于您配置的设计系统生成的所有样式。

如果您使用的是 postcss-import（或背后使用它的工具，例如 Webpacker for Rails），请使用我们的导入而不是 @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) 选项以删除任何未使用类，这样生成的文件尺寸最小：

  // 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.

在这种情况下，您应该切换到我们的