Tailwind CSS - 与预处理器配合使用

预处理器是一种脚本语言，它扩展 CSS 并将其编译为常规 CSS 语法，以便您的 Web 浏览器可以读取。

由于 Tailwind 是基于 PostCSS 的，因此您可以使用 SASS、LESS 和 Stylus 等预处理器，但使用它们有一些技巧。如果您已经了解这些预处理器的一些语法，那么它们可能无法像在常规 CSS 中那样与 Tailwind 兼容。请阅读本文以获取指南。

为了获得最佳开发体验，我们强烈建议您使用 PostCSS 插件，并且不要使用 Sass 或 Less 预处理器。

使用 PostCSS 作为预处理器

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

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

构建时导入

预处理器提供的最实用功能之一是能够将 CSS 组织到多个文件中，并通过预先处理 @import 语句(而不是在浏览器中)在构建时将它们合并。要安装 PostCSS，请运行以下命令。

npm install -D postcss-import

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

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

'postcss-import' 非常严格，除了文件顶部之外，不允许在任何地方使用 '@import' 语句。

/* components.css */

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

/* 无效 */
@import "./components/card";

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

嵌套

我们建议使用我们捆绑的 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 插件，该插件支持 Tailwind CSS 插件 API 中的嵌套功能，其语法与 SASS 类似。

如果您更愿意使用 postcss-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 支持变量，因此无需使用预处理器即可使用变量。了解更多关于 CSS 变量 的信息。

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

/* ... */

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

已使用的变量可以用 Tailwind 的 'theme()' 函数替换。这样您就可以直接在 CSS 中访问 tailwind.config.js 文件中所有的设计标记。

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

供应商前缀

Autoprefixer 将帮助您管理 CSS 中的供应商前缀。

/* 通过 npm 安装 */
npm install -D autoprefixer

/* 将其添加到 PostCSS 配置中插件列表的末尾 */

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

将 Tailwind 安装为 PostCSS 插件

在安装 PostCSS 插件之前，您应该先安装 Tailwind CSS。

先决条件

• 安装 Tailwind CSS

要安装 PostCSS，请按照以下步骤操作。

步骤 1:将 Tailwind 添加到您的 PostCSS 配置

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

步骤 2:配置模板路径

步骤 3:将 Tailwind 指令添加到 CSS 中

/* tailwind.config.js */
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

步骤 4:开始构建流程

@tailwind base;
@tailwind components;
@tailwind utility;

步骤 5:开始在 HTML 中使用 Tailwind

npm run dev