与预处理器一起使用

由于 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 存储库，但以下是一些我们在自己的项目中使用并可以推荐的重要插件。

​构建时导入

预处理器提供的一个最有用的特性是将你的 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 插件，用于包装 postcss-nested 或 postcss-nesting，并充当兼容性层，以确保你选择的嵌套插件正确理解 Tailwind 的自定义语法。

它直接包含在 tailwindcss 包中，因此要使用它，你需要做的就是将其添加到你的 PostCSS 配置中，位于 Tailwind 之前。

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

默认情况下，它在底层使用 postcss-nested 插件，它使用类似 Sass 的语法，并且是 Tailwind CSS 插件 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 变量（正式称为自定义属性）具有非常好的 浏览器支持，因此你根本不需要预处理器来使用变量。

: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');
  /* ... */
}

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

​供应商前缀

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

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

npm install -D autoprefixer

然后将它添加到 PostCSS 配置中插件列表的最后

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

---

​使用 Sass、Less 或 Stylus

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

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

请参阅我们的文档 将 Tailwind 安装为 PostCSS 插件，以了解有关将 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;
  }
}

从技术上讲，这会在媒体查询周围产生额外的括号，但仍然有效。

​Stylus

将 Tailwind 与 Stylus 一起使用时，如果不将整个 CSS 规则用 @css 括起来，使其 Stylus 将其视为文字 CSS，则无法使用 Tailwind 的 @apply 特性。

.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;
  }
}

从技术上讲，这会在媒体查询周围产生额外的括号，但仍然有效。