与预处理器一起使用

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

值得注意的是，您不需要使用 Tailwind 的预处理器——您通常在 Tailwind 项目中编写很少的 CSS，因此使用预处理器并不像在编写大量自定义 CSS 的项目中那样有益。

本指南仅供那些由于不可控的原因而需要将 Tailwind 与预处理器集成的人员参考，而不是因为它是一种推荐的做法。

---

​使用 PostCSS 作为预处理器

如果您正在将 Tailwind 用于全新项目，并且不需要将其与任何现有的 Sass/Less/Stylus 样式表集成，则您应该强烈考虑依赖其他 PostCSS 插件来添加您使用的预处理器功能，而不是使用单独的预处理器。

这有几个好处：

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

有关可用的 PostCSS 插件的相当全面的列表，请参阅 PostCSS GitHub repository，但这里有一些我们在自己的项目中使用并可以推荐的重要插件。

​构建时导入

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

使用 PostCSS 处理此问题的标准插件是 postcss-import。

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

npm install -D postcss-import

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

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

关于 postcss-import 需要注意的一件重要事情是，它严格遵守 CSS 规范，并且不允许在文件最顶部以外的任何地方使用 @import 语句。

/* components.css */

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

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

解决此问题最简单的方法是永远不要将常规 CSS 和导入混放在同一个文件中。相反，为导入创建一个主入口文件，并将所有实际 CSS 放在单独的文件中。

/* 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 文件中。

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

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

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

您可以通过为每个 @tailwind 声明创建单独的文件，然后在主样式表中导入这些文件来解决此问题。为了简化此操作，我们为每个 @tailwind 声明提供了单独的文件，您可以直接从 node_modules 导入这些文件。

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

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

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

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

​嵌套

为了添加对嵌套声明的支持，我们推荐捆绑的 tailwindcss/nesting 插件，这是一个包装 postcss-nested 或 postcss-nesting 的 PostCSS 插件，并充当兼容层，以确保您选择的嵌套插件正确理解 Tailwind 的自定义语法。

它直接包含在 tailwindcss 包本身中，因此要使用它，您只需将其添加到您的 PostCSS 配置中，在 Tailwind 之前的某个地方：

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

默认情况下，它使用 postcss-nested 插件，该插件使用类似 Sass 的语法，并且是支持 Tailwind CSS plugin API 中嵌套的插件。

如果您宁愿使用 postcss-nesting（基于标准 CSS Nesting 规范），请首先安装插件：

npm install -D postcss-nesting

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

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

如果出于某种原因您需要使用 postcss-nested 的特定版本并想要覆盖我们与 tailwindcss/nesting 本身捆绑的版本，这也会有所帮助。

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

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

​变量

如今，CSS 变量（正式称为自定义属性）具有非常好的 browser support，因此您根本不需要预处理器来使用变量。

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

/* ... */

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

我们在 Tailwind 内部广泛使用 CSS 变量，因此如果您可以使用 Tailwind，那么您就可以使用本机 CSS 变量。

您还可能会发现，过去使用变量的大多数内容都可以用 Tailwind 的 theme() 函数替换，该函数可让您直接在 CSS 中访问 tailwind.config.js 文件中的所有设计令牌：

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

在我们的functions and directives documentation中了解有关theme()功能的更多信息。

​供应商前缀

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

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

npm install -D autoprefixer

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

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

---

​使用 Sass、Less 或 Stylus

为了获得最佳开发体验，我们强烈建议您 use PostCSS exclusively，并且不要在 Tailwind 项目中使用 Sass 或 Less 等预处理器。

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

请参阅有关 installing Tailwind as a PostCSS plugin 的文档，了解有关将 Tailwind 集成到现有构建流程的更多信息。

关于将 Tailwind 与预处理器结合使用，最重要的一点是Sass、Less 和 Stylus 等预处理器在 Tailwind 之前单独运行。这意味着您无法将 Tailwind 的 theme() 函数的输出输入到 Sass 颜色函数中，因为 theme() 函数实际上直到 Sass 被编译为 CSS 并输入到 PostCSS 中才会被评估。

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

除此之外，一些预处理器在与 Tailwind 一起使用时会出现一些怪癖，下面概述了解决方法。

​Sass

当将 Tailwind 与 Sass 结合使用时，将 !important 与 @apply 结合使用需要您使用插值才能正确编译。

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

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

除此之外，除非用括号括起来，否则 Sass 在使用 Tailwind 的 screen() 函数时会出现问题。

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

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

从技术上讲，这会导致媒体查询周围出现一组额外的括号，但它仍然有效。

​触控笔

当将 Tailwind 与 Stylus 结合使用时，如果不将整个 CSS 规则包装在 @css 中，则无法使用 Tailwind 的 @apply 功能，以便 Stylus 将其视为文字 CSS。

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

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

然而，这带来了不小的代价，那就是你不能在 @css 块内使用任何 Stylus 功能。

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

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

除此之外，除非您使用插值并将其包裹在括号中，否则 Stylus 在使用 Tailwind 的 screen() 函数时会出现问题。

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

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

从技术上讲，这会导致媒体查询周围出现一组额外的括号，但它仍然有效。