Tailwind-主题变量变体工具类

Tailwind CSS 的 主题变量（theme variables）、变体（variants） 和 工具类（utility classes） 是它的三大核心概念，它们相互配合让你能够快速、可定制地写样式。下面我帮你梳理一下它们的关系和区别：

1️⃣ 主题变量（Theme Variables）

是什么： 主题变量是 Tailwind 配置文件（tailwind.config.js）里定义的设计系统值，比如颜色、间距、字体大小、阴影、断点等。

作用：

• 定义可复用的设计“Token”，确保设计一致性
• 生成对应的工具类（utility classes）
• 可以扩展或覆盖默认主题

例子：

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: '#1E40AF',
      },
      spacing: {
        72: '18rem',
      }
    }
  }
}

这样会生成：

• bg-brand、text-brand
• p-72、m-72 等工具类

2️⃣ 工具类（Utility Classes）

是什么： Tailwind 的工具类是直接作用在元素上的单一功能类，通常只做“一件事”。

作用：

• 快速写样式，无需手写 CSS
• 每个工具类的名称直观地表达样式
• 由主题变量生成，所以能保持设计一致

例子：

<div class="bg-brand text-white p-6 rounded-lg shadow-md">
  Hello Tailwind
</div>

这些类分别表示：

• bg-brand → 背景色使用主题里的 brand
• text-white → 文本颜色白色
• p-6 → 内边距 1.5rem
• rounded-lg → 边角圆润
• shadow-md → 中等阴影

3️⃣ 变体（Variants）

是什么： 变体是工具类的前缀，用来描述某种状态、伪类或媒体查询下的样式。

作用：

• 让工具类在不同状态下生效
• 避免手写复杂的选择器

常见变体：

• 状态：hover:, focus:, active:, disabled:
• 响应式：sm:, md:, lg:, xl:
• 其他：dark:, group-hover:, first:, last:, odd:, even:

例子：

<button class="bg-brand hover:bg-brand/80 focus:ring-2 md:p-6">
  Button
</button>

含义：

• hover:bg-brand/80 → 鼠标悬停时背景色变浅
• focus:ring-2 → 聚焦时显示 ring
• md:p-6 → 在中屏及以上设备才有 1.5rem 内边距

关系总结（一句话）

• 主题变量（Theme）：定义设计系统的值（颜色、间距、字体等）
• 工具类（Utility Classes）：用主题变量生成的“原子类”，直接写在 HTML 里
• 变体（Variants）：工具类的“状态修饰符”，控制工具类在特定条件下生效

变体就是有筛选功能的，类似于CSS选择器