Tailwind CSS - 与预处理器一起使用

Tailwind CSS：预处理器与现代化工作流

Tailwind CSS 本质上是一个 PostCSS 插件。这意味着它被设计为无缝融入现代 CSS 工具链。虽然你可以将其与 Sass 或 Less 等传统预处理器一起使用，但最强大和高效的工作流是直接利用 PostCSS 生态系统。

最佳实践： 对于新项目，我们强烈建议将 PostCSS 作为你的主要 CSS 处理工具。这能带来更快的构建速度、更简单的配置，并避免兼容性问题。

## 推荐的 PostCSS 工作流

你无需使用单独的预处理器，而是可以通过专门的 PostCSS 插件来添加诸如导入（imports）和嵌套（nesting）之类的功能。这是大多数现代前端框架（如 Vite、Next.js 和 SvelteKit）所采用的方法。

### 1. 项目设置

首先在你的项目中设置 Tailwind。如果你正在使用一个框架，请遵循其特定的指南。对于独立项目，请使用 Tailwind CLI：

# 1. Install Tailwind CSS
npm install -D tailwindcss postcss autoprefixer

# 2. Create your configuration files
npx tailwindcss init -p

这将创建 tailwind.config.js 和 postcss.config.js 文件。

### 2. 添加预处理器功能

现在，让我们使用 PostCSS 插件来添加常见的预处理器功能。

导入（@import） 要在构建时合并多个 CSS 文件，请使用 postcss-import。

npm install -D postcss-import

嵌套（Nesting） 对于 CSS 规则的嵌套，请使用官方的 tailwindcss/nesting 插件。它是一个兼容层，可确保嵌套与 Tailwind 的语法正确协同工作。

# `tailwindcss/nesting` 插件已与 `tailwindcss` 捆绑，因此无需额外安装。

### 3. 配置 postcss.config.js

插件的顺序很重要。postcss-import 和 tailwindcss/nesting 必须在 tailwindcss 之前运行。

postcss.config.js

module.exports = {
  plugins: {
    'postcss-import': {},          // 处理 @import 语句
    'tailwindcss/nesting': {},     // 处理 CSS 嵌套
    'tailwindcss': {},             // 处理 Tailwind 指令及类
    'autoprefixer': {},            // 添加浏览器兼容性厂商前缀
  },
}

### 4. 组织你的 CSS 结构

有了这样的设置，你就可以逻辑地组织你的 CSS 了。

src/input.css

/* 1. 导入 Tailwind 的基础样式、组件样式和工具样式 */
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

/* 2. 导入你自己的自定义组件样式 */
@import "./components/buttons.css";
@import "./components/cards.css";

/* 3. 添加任何顶层自定义基础样式 */
body {
  @apply bg-gray-100 text-gray-800;
}

src/components/buttons.css

.btn-primary {
  @apply px-4 py-2 bg-blue-600 text-white rounded-md;

  &:hover {
    @apply bg-blue-700;
  }
}

## 变量：theme() 函数与 CSS 自定义属性

对于变量，你有两种强大的选择：

• theme() 函数： 使用它可以在你的 CSS 中直接访问 tailwind.config.js 中的设计令牌（design tokens）。这是与你的设计系统保持一致的最佳方式。
• CSS 自定义属性（--*）： 用于需要在浏览器中通过 JavaScript 更改的动态值，或者用于不在你的主题（theme）中的值。

:root {
  --header-height: 60px; /* 动态值 */
}

.header {
  height: var(--header-height);
  background-color: theme('colors.slate.800'); /* 主题值 */
}

## 使用传统预处理器（Sass/Less）

如果你必须将 Tailwind 集成到一个已经使用 Sass 等预处理器的项目中，这是可行的。关键是首先处理你的 Sass/Less 文件，然后将输出通过管道传递给 PostCSS。

### 工作流

你的构建过程应如下所示：Sass 文件 -> Sass 编译器 -> CSS 输出 -> PostCSS (含 Tailwind) -> 最终 CSS。

### 潜在的陷阱

请注意语法冲突。例如，Sass 有其自己的 @apply 规则，该规则已被弃用。最常见的问题是在 Sass 文件中使用 Tailwind 的 !important 修饰符与 @apply，这需要插值：

// Inside a .scss file

.my-class {
  // 你必须将 `!important` 用 `#{}` 包裹起来，以便 Sass 忽略它
  @apply text-red-500 #{!important};
}

由于这些虽小但令人沮丧的怪癖，为了获得最佳开发体验，建议迁移到纯 PostCSS 设置。