Mazwei Docs

Appearance

使用预处理器 ​

使用 Tailwind 与常见的 CSS 预处理器（如Sass、Less和Stylus）的指南。

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

重要的是要注意，您在使用 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 安装插件：

sh
npm install -D postcss-import

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

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

关于 postcss-import 的一个重要注意事项是，它严格遵循 CSS 规范，并禁止在文件的任何位置使用 @import 语句。

✘ 不会起作用，`@import` 语句必须放在最前面

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

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

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

✓ 使用单独的文件进行导入和实际的 CSS

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

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

✘ 不会起作用，`@import` 语句必须放在最前面

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" 就足够了。

✓ 导入我们提供的 CSS 文件

css
@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 之前的某个位置。

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

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

如果您更愿意使用 postcss-nesting（它基于正在进行中的 CSS 嵌套规范），请先安装插件：

sh
npm install -D postcss-nesting

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

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

这也可以有所帮助，如果出于任何原因，您需要使用一个非常特定的版本 postcss-nested ，并且希望覆盖我们捆绑在 tailwindcss/nesting 本身的版本。

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

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

变量 ​

这段时间 CSS 变量（官方称为自定义属性）在浏览器上得到了很好的支持，因此您根本不需要预处理器来使用变量。

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

/* ... */

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

我们在 Tailwind 本身中广泛使用 CSS 变量，因此如果您可以使用 Tailwind，您也可以使用原生的 CSS 变量。

您可能还会发现，您过去使用变量的大部分事情都可以用 Tailwind 的 theme() 函数替换，这样您就可以直接在 CSS 中访问来自 tailwind.config.js 文件的所有设计令牌：

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

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

浏览器前缀 ​

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

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

sh
npm install -D autoprefixer

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

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

使用 Sass、Less 或 Stylus ​

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

要使用 Tailwind 与像 Sass、Less 或 Stylus 这样的预处理工具，您需要向项目添加一个额外的构建步骤，让您可以通过 PostCSS 运行预处理的 CSS。如果您在项目中使用 Autoprefixer，您已经设置了类似的东西。

请查看我们的文档，了解如何将 Tailwind 安装为 PostCSS 插件，以便将 Tailwind 集成到您现有的构建流程中。

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

✘ 无法运行，Sass 首先被处理

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

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

Sass ​

当在 Sass 中使用 Tailwind 时，使用 !important 与 @apply 需要使用插值才能正确编译。

✘ 不起作用，Sass 抱怨 !important

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

✓ 使用插值作为一种解决方法

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

除此之外，Sass 在不使用括号包裹的情况下，无法正确处理 Tailwind 的 screen() 函数。

✘ 无法工作，Sass 将生成一个错误

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

✓ 将 screen() 函数用括号括起来

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

从技术上讲，这会在您的媒体查询周围多出一组括号，但它仍然有效。

Stylus ​

当使用 Stylus 与 Tailwind 时，您无法在不将整个 CSS 规则包装在 @css 中的情况下使用 Tailwind 的 @apply 功能，以便 Stylus 将其视为字面上的 CSS。

✘ 无法工作，Stylus 抱怨 @apply

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

✓ 使用 @css 避免作为 Stylus 处理

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

然而，这样做会带来显著的成本，即您无法在 @css 块内使用任何 Stylus 功能。

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

✓ 使用 theme() 代替 @apply

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

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

✘ 无法工作，Stylus 会生成一个错误

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

✓ 使用插值和括号作为一种变通方法

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

从技术上讲，这会在您的媒体查询周围多出一组括号，但它仍然有效。

Released under the MIT License.

Copyright © 2019-present Mazwei