用途：帮助在 Tailwind CSS 中正确书写条件样式。变体前缀把普通工具类（如 bg-blue-500）变成带状态的规则（如 hover:bg-blue-500、md:dark:hover:bg-blue-500）。资料称 Tailwind 内置约 100 个变体，分属十类，另有任意 [&...] 写法。
主要能力：覆盖伪类（hover、focus、active）、伪元素（before、placeholder）、媒体查询（sm、dark、motion-reduce、print）、特性查询（supports-[display:grid]）、属性（aria-checked、data-[state=open]）、组合器（group-、peer-、命名 group/sidebar）、父级位置（first、last、odd、*:）、任意变体与重要修饰符。
关键差异：v3.4 变体堆叠从右往左读，v4.0+ 从左往右读，顺序在版本间翻转；v4 新增 has-、not-、in-、nth-、**: 等，v3 需用任意变体替代；重要修饰符 v3 为前置 !flex，v4 为后置 flex!；自定义变体 v3 用 addVariant() 插件，v4 用 @custom-variant 指令，addVariant() 在 v4 已移除。升级工具 npx @tailwindcss/upgrade 可处理多数情况，但含 *:、结构变体或任意 [&...] 的写法需人工检查。
使用方式：在 class 中叠加变体前缀，如 bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 md:px-8；嵌套组件用命名 group 消除歧义；集成 Radix UI、Headless UI 时用 data-[state=open] 等属性变体。
限制：部分变体仅 v4 可用；hover 在 v4 受 @media (hover: hover) 限制；具体配置与版本行为以官方文档为准，资料未提供价格或平台信息。