使用预处理器

由于 Tailwind 是一个 PostCSS 插件，所以你完全可以像使用其他 PostCSS 插件（如 Autoprefixer）一样，将它与 Sass、Less、Stylus 或其他预处理器一起使用。

🌐 Since Tailwind is a PostCSS plugin, there’s nothing stopping you from using it with Sass, Less, Stylus, or other preprocessors, just like you can with other PostCSS plugins like Autoprefixer.

重要的是要注意，使用 Tailwind 不需要使用预处理器——毕竟在 Tailwind 项目中你通常写的 CSS 很少，所以使用预处理器并不像在需要编写大量自定义 CSS 的项目中那样有益。

🌐 It’s important to note that you don’t need to use a preprocessor with Tailwind — you typically write very little CSS on a Tailwind project anyway, so using a preprocessor just isn’t as beneficial as it would be in a project where you write a lot of custom CSS.

本指南仅作为参考，供那些因无法控制的原因需要将 Tailwind 与预处理器集成的人使用，并非推荐的做法。

🌐 This guide only exists as a reference for people who need to integrate Tailwind with a preprocessor for reasons outside of their control, not because it is a recommended practice.

---

​使用 PostCSS 作为预处理器(Using PostCSS as your preprocessor)

如果你在一个全新的项目中使用 Tailwind，并且不需要将其与任何现有的 Sass/Less/Stylus 样式表集成，那么你应该认真考虑依靠其他 PostCSS 插件来添加你使用的预处理功能，而不是使用单独的预处理器。

🌐 If you’re using Tailwind for a brand new project and don’t need to integrate it with any existing Sass/Less/Stylus stylesheets, you should highly consider relying on other PostCSS plugins to add the preprocessor features you use instead of using a separate preprocessor.

这有一些好处：

🌐 This has a few benefits:

• 你的构建速度将更快。由于你的 CSS 不需要被多个工具解析和处理，只使用 PostCSS 就可以让 CSS 编译得更快。
• 没有怪癖或变通方法。 因为 Tailwind 向 CSS 添加了一些新的非标准关键字（如 @tailwind、@apply、theme() 等），你经常不得不以令人烦恼、不直观的方式编写 CSS，才能让预处理器产生预期的输出。仅使用 PostCSS 可以避免这种情况。

有关可用 PostCSS 插件的较全面列表，请参阅 PostCSS GitHub 仓库，但这里列出了一些我们自己项目中使用并推荐的重要插件。

🌐 For a fairly comprehensive list of available PostCSS plugins see the PostCSS GitHub repository, but here are a few important ones we use on our own projects and can recommend.

​构建时导入(Build-time imports)

预处理器提供的最有用的功能之一是能够将你的 CSS 组织到多个文件中，并在构建时通过提前处理 @import 语句来进行合并，而不是在浏览器中处理。

🌐 One of the most useful features preprocessors offer is the ability to organize your CSS into multiple files and combine them at build time by processing @import statements in advance, instead of in the browser.

处理这个问题的标准 PostCSS 插件是 postcss-import。

🌐 The canonical plugin for handling this with PostCSS is postcss-import.

要使用它，请通过 npm 安装插件：

🌐 To use it, install the plugin via npm:

npm install -D postcss-import

然后将其作为 PostCSS 配置中的第一个插件添加：

🌐 Then add it as the very first plugin in your PostCSS configuration:

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

关于 postcss-import 有一点需要注意，那就是它严格遵循 CSS 规范，并且不允许在文件的任何位置使用 @import 语句，除了文件的最顶部。

🌐 One important thing to note about postcss-import is that it strictly adheres to the CSS spec and disallows @import statements anywhere except at the very top of a file.

/* components.css */

.btn {
  padding: theme('spacing.4') theme('spacing.2');
  /* ... */
}

/* Will not work */
@import "./components/card";

解决这个问题最简单的方法是不要在同一个文件中混合使用常规 CSS 和导入。相反，应创建一个用于导入的主入口文件，并将所有实际的 CSS 保存在单独的文件中。

🌐 The easiest solution to this problem is to never mix regular CSS and imports in the same file. Instead, create one main entry-point file for your imports, and keep all of your actual CSS in separate files.

/* components.css */
@import "./components/buttons.css";
@import "./components/card.css";

/* components/buttons.css */
.btn {
  padding: theme('spacing.4') theme('spacing.2');
  /* ... */
}

/* components/card.css */
.card {
  padding: theme('spacing.4');
  /* ... */
}

你最有可能遇到这种情况的地方是在包含你 @tailwind 声明的主 CSS 文件中。

🌐 The place you are most likely to run into this situation is in your main CSS file that includes your @tailwind declarations.

@tailwind base;
@import "./custom-base-styles.css";

@tailwind components;
@import "./custom-components.css";

@tailwind utilities;
@import "./custom-utilities.css";

你可以通过为每个 @tailwind 声明创建单独的文件来解决这个问题，然后在你的主样式表中导入这些文件。为了方便起见，我们提供了每个 @tailwind 声明的单独文件，你可以直接从 node_modules 导入使用。

🌐 You can solve this by creating separate files for each @tailwind declaration, and then importing those files in your main stylesheet. To make this easy, we provide separate files for each @tailwind declaration out of the box that you can import directly from node_modules.

postcss-import 插件足够智能，可以自动在 node_modules 文件夹中查找文件，因此你不需要提供完整路径——例如，只需 "tailwindcss/base" 就够了。

🌐 The postcss-import plugin is smart enough to look for files in the node_modules folder automatically, so you don’t need to provide the entire path — "tailwindcss/base" for example is enough.

@import "tailwindcss/base";
@import "./custom-base-styles.css";

@import "tailwindcss/components";
@import "./custom-components.css";

@import "tailwindcss/utilities";
@import "./custom-utilities.css";

​嵌套(Nesting)

为了增加对嵌套声明的支持，我们推荐使用随附的 tailwindcss/nesting 插件，这是一个 PostCSS 插件，它封装了 postcss-nested 或 postcss-nesting，并作为兼容层，确保你选择的嵌套插件能够正确理解 Tailwind 的自定义语法。

🌐 To add support for nested declarations, we recommend our bundled tailwindcss/nesting plugin, which is a PostCSS plugin that wraps postcss-nested or postcss-nesting and acts as a compatibility layer to make sure your nesting plugin of choice properly understands Tailwind’s custom syntax.

它直接包含在 tailwindcss 包中，因此要使用它，你只需要将其添加到你的 PostCSS 配置中，放在 Tailwind 之前的某个位置即可：

🌐 It’s included directly in the tailwindcss package itself, so to use it all you need to do is add it to your PostCSS configuration, somewhere before Tailwind:

// postcss.config.js
module.exports = {
  plugins: {
    'postcss-import': {},
    'tailwindcss/nesting': {},
    tailwindcss: {},
    autoprefixer: {},
  }
}

默认情况下，它在底层使用 postcss-nested 插件，该插件使用类似 Sass 的语法，也是为 Tailwind CSS 插件 API 提供嵌套支持的插件。

🌐 By default, it uses the postcss-nested plugin under the hood, which uses a Sass-like syntax and is the plugin that powers nesting support in the Tailwind CSS plugin API.

如果你更愿意使用 postcss-nesting（它基于标准的 CSS Nesting 规范），首先安装该插件：

🌐 If you’d rather use postcss-nesting (which is based on the standard CSS Nesting specification), first install the plugin:

npm install -D postcss-nesting

然后在你的 PostCSS 配置中将插件本身作为参数传递给 tailwindcss/nesting：

🌐 Then pass the plugin itself as an argument to tailwindcss/nesting in your PostCSS configuration:

// postcss.config.js
module.exports = {
  plugins: {
    'postcss-import': {},
    'tailwindcss/nesting': 'postcss-nesting',
    tailwindcss: {},
    autoprefixer: {},
  }
}

如果出于某种原因你需要使用 postcss-nested 的特定版本，并且想要覆盖我们随 tailwindcss/nesting 打包的版本，这也可能会很有用。

🌐 This can also be helpful if for whatever reason you need to use a very specific version of postcss-nested and want to override the version we bundle with tailwindcss/nesting itself.

请注意，如果你在项目中使用 postcss-preset-env，应确保禁用嵌套，并让 tailwindcss/nesting 为你处理它：

🌐 Note that if you are using postcss-preset-env in your project, you should make sure to disable nesting and let tailwindcss/nesting handle it for you instead:

// postcss.config.js
module.exports = {
  plugins: {
    'postcss-import': {},
    'tailwindcss/nesting': 'postcss-nesting',
    tailwindcss: {},
    'postcss-preset-env': {
      features: { 'nesting-rules': false },
    },
  }
}

​变量(Variables)

如今，CSS 变量（官方称为自定义属性）具有很好的浏览器支持，因此完全不需要预处理器就可以使用变量。

🌐 These days CSS variables (officially known as custom properties) have really good browser support, so you don’t need a preprocessor to use variables at all.

:root {
  --theme-color: #52b3d0;
}

/* ... */

.btn {
  background-color: var(--theme-color);
  /* ... */
}

我们在 Tailwind 内部广泛使用 CSS 变量，所以如果你能使用 Tailwind，你也可以使用原生 CSS 变量。

🌐 We use CSS variables extensively within Tailwind itself, so if you can use Tailwind, you can use native CSS variables.

你可能还会发现，过去你使用变量的大部分情况都可以用 Tailwind 的 theme() 函数替代，该函数让你可以直接在 CSS 中访问 tailwind.config.js 文件中的所有设计标记：

🌐 You may also find that most of the things you’ve used variables for in the past can be replaced with Tailwind’s theme() function, which gives you access to all of your design tokens from your tailwind.config.js file directly in your CSS:

.btn {
  background-color: theme('colors.blue.500');
  padding: theme('spacing.2') theme('spacing.4');
  /* ... */
}

在我们的函数和指令文档中了解更多关于 theme() 函数的信息。

🌐 Learn more about the theme() function in our functions and directives documentation.

​浏览器前缀(Vendor prefixes)

为了自动管理 CSS 中的厂商前缀，你应该使用 Autoprefixer。

🌐 For automatically managing vendor prefixes in your CSS, you should use Autoprefixer.

要使用它，请通过 npm 安装：

🌐 To use it, install it via npm:

npm install -D autoprefixer

然后将其添加到 PostCSS 配置中插件列表的最后一项：

🌐 Then add it to the very end of your plugin list in your PostCSS configuration:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

---

​使用 Sass、Less 或 Stylus(Using Sass, Less, or Stylus)

为了获得最佳的开发体验，我们强烈建议你仅使用 PostCSS，并且不要在你的 Tailwind 项目中使用像 Sass 或 Less 这样的预处理器。

🌐 For the best development experience, we highly recommend that you use PostCSS exclusively, and that you don’t use preprocessors like Sass or Less in your Tailwind projects.

要将 Tailwind 与 Sass、Less 或 Stylus 等预处理工具一起使用，你需要在项目中添加一个额外的构建步骤，以便通过 PostCSS 运行预处理后的 CSS。如果你的项目中已经使用了 Autoprefixer，那么你已经设置了类似的流程。

🌐 To use Tailwind with a preprocessing tool like Sass, Less, or Stylus, you’ll need to add an additional build step to your project that lets you run your preprocessed CSS through PostCSS. If you’re using Autoprefixer in your project, you already have something like this set up.

查看我们的文档，了解如何将 Tailwind 作为 PostCSS 插件安装：安装 Tailwind，以了解有关将 Tailwind 集成到现有构建流程的更多信息。

🌐 See our documentation on installing Tailwind as a PostCSS plugin to learn more about integrating Tailwind into your existing build process.

关于在预处理器中使用 Tailwind，最重要的是要理解像 Sass、Less 和 Stylus 这样的预处理器是在 Tailwind 之前单独运行的。这意味着，例如，你不能将 Tailwind 的 theme() 函数的输出直接输入到 Sass 的颜色函数中，因为 theme() 函数实际上要等到你的 Sass 被编译成 CSS 并传入 PostCSS 后才会被执行。

🌐 The most important thing to understand about using Tailwind with a preprocessor is that preprocessors like Sass, Less, and Stylus run separately, before Tailwind. This means that you can’t feed output from Tailwind’s theme() function into a Sass color function for example, because the theme() function isn’t actually evaluated until your Sass has been compiled to CSS and fed into PostCSS.

.alert {
  background-color: darken(theme('colors.red.500'), 10%);
}

除此之外，一些预处理器在与 Tailwind 一起使用时有一些怪癖，下面列出了相应的解决方法。

🌐 Aside from that, some preprocessors have quirks when used with Tailwind, which are outlined with workarounds below.

​Sass

在使用 Tailwind 和 Sass 时，使用 !important 搭配 @apply 需要使用插值才能正确编译。

🌐 When using Tailwind with Sass, using !important with @apply requires you to use interpolation to compile properly.

.alert {
  @apply bg-red-500 !important;
}

.alert {
  @apply bg-red-500 #{!important};
}

除此之外，Sass 在使用 Tailwind 的 screen() 函数时会有麻烦，除非用括号括起来。

🌐 In addition to this, Sass has trouble with Tailwind’s screen() function unless wrapped in parentheses.

@media screen(md) {
  .foo {
    color: blue;
  }
}

@media (screen(md)) {
  .foo {
    color: blue;
  }
}

从技术上讲，这会在你的媒体查询周围多出一对括号，但它仍然可以正常工作。

🌐 Technically this results in an extra set of parentheses around your media query, but it still works.

​Stylus

在使用 Tailwind 与 Stylus 时，如果不将整个 CSS 规则封装在 @css 中，Stylus 无法将其作为字面 CSS 处理，就无法使用 Tailwind 的 @apply 功能。

🌐 When using Tailwind with Stylus, you can’t use Tailwind’s @apply feature without wrapping the entire CSS rule in @css so that Stylus treats it as literal CSS.

.card {
  @apply rounded-lg bg-white p-4
}

@css {
  .card {
    @apply rounded-lg bg-white p-4
  }
}

然而，这会带来一个重大代价，那就是 你不能在 @css 块内使用任何 Stylus 功能。

🌐 This comes with a significant cost however, which is that you cannot use any Stylus features inside a @css block.

另一种选择是使用 theme() 函数而不是 @apply，并以长格式写出实际的 CSS 属性：

🌐 Another option is to use the theme() function instead of @apply, and write out the actual CSS properties in long form:

.card {
  border-radius: theme('borderRadius.lg');
  background-color: theme('colors.white');
  padding: theme('spacing.4');
}

此外，除非使用插值并用括号包起来，否则 Stylus 在处理 Tailwind 的 screen() 函数时会有问题。

🌐 In addition to this, Stylus has trouble with Tailwind’s screen() function unless you use interpolation and wrap it in parentheses.

@media screen(md) {
  .foo {
    color: blue;
  }
}

@media ({'screen(md)'}) {
  .foo {
    color: blue;
  }
}

从技术上讲，这会在你的媒体查询周围多出一对括号，但它仍然可以正常工作。

🌐 Technically this results in an extra set of parentheses around your media query, but it still works.