Tailwind CSS 指令及函数

除了工具类，Tailwind 还提供了一些特殊的指令 (Directives) 和函数，让你可以在自定义 CSS 中与 Tailwind 的系统进行更深度的集成。

@tailwind

这是你最先接触到的指令，用于在你的主 CSS 文件中注入 Tailwind 的不同部分。

@tailwind base;
@tailwind components;
@tailwind utilities;

• @tailwind base: 注入 Tailwind 的基础样式（一个名为 Preflight 的现代化 CSS 重置方案）和任何由插件注册的基础样式。
• @tailwind components: 注入 Tailwind 的组件类和任何由插件注册的组件类。
• @tailwind utilities: 注入 Tailwind 的所有功能类和任何由插件注册的功能类。

@layer

@layer 指令用于告诉 Tailwind 你的自定义样式属于哪个“层”。这对于控制 CSS 规则的顺序和覆盖关系非常重要，特别是当你想添加可被工具类（如 hover: 或 focus:）覆盖的自定义样式时。

Tailwind 有三个主要的层：base, components, 和 utilities。

示例：自定义链接样式

如果你想为所有 <a> 标签定义一个基础样式，但又希望能够用 text-red-500 这样的工具类来覆盖它，你可以这样做：

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  a {
    @apply text-blue-600 underline;
  }
  a:hover {
    @apply text-blue-800;
  }
}

通过将自定义样式放在 base 层，你确保了它们可以被 components 和 utilities 层的类覆盖。

@apply

@apply 指令允许你将一系列 Tailwind 工具类提取到一个自定义的 CSS 类中。这在“重用样式”一章中有详细讨论。

@layer components {
  .card {
    background-color: white;
    border-radius: 0.5rem;
    padding: 1.5rem;
    box-shadow: theme('boxShadow.lg');
  }
  /* 使用 @apply 的等效写法 */
  .card-alternative {
    @apply bg-white rounded-lg p-6 shadow-lg;
  }
}

注意：@apply 不会为你处理 CSS 规则的合并或覆盖，它只是简单地将工具类对应的 CSS 粘贴进来。因此，过度使用可能会导致代码难以维护。

theme()

theme() 函数允许你在自定义 CSS 中访问 tailwind.config.js 中定义的主题值。这在你编写不适合用 @apply 的复杂 CSS，但又想引用设计系统中的值（如颜色、间距）时非常有用。

示例：

.content-area {
  height: calc(100vh - theme('spacing.12'));
}

.main-title {
  color: theme('colors.primary');
  font-family: theme('fontFamily.sans');
}

theme() 函数使用点表示法来访问嵌套的主题值。它是在保持 CSS 灵活性的同时，与你的设计系统保持一致的强大工具。