Tailwind CSS v3.1+ 不支持伪类嵌套，hover:focus:active 类名无效，因其仅取最后一个变体（active），需用 addVariant 手动注册 focus-hover 等双状态变体。
Tailwind CSS v3.1+ 不支持真正的伪类嵌套（比如 :hover:focus:active 这种原生 CSS 选择器逻辑），它只支持单层变体前缀叠加；所谓“任意变体”是通过插件手动注册生成对应的选择器，不是语法糖，也不能自动推导嵌套关系。
为什么 hover:focus:active 类名完全无效
Tailwind 的变体系统在解析时会按冒号分割，只取最后一个有效变体——hover:focus:active:bg-red-500 实际被当作 active:bg-red-500 处理，中间的 hover: 和 focus: 被丢弃。这不是 bug，而是设计使然：变体是“条件修饰符”，不是选择器构造器。
- 浏览器真正需要的是
&:hover:focus:active这样的复合选择器，但 Tailwind 默认不生成 -
focus:hover和hover:focus语义等价，但顺序影响你定义时的可读性（建议按事件流写：focus-hover表示“先 focus 再 hover”） - 三重及以上组合（如
hover:focus:active）无法用单一变体覆盖，必须拆解为两两组合 + JS 状态管理
如何用 addVariant 添加 focus-hover 这类双状态变体
v3.1+ 必须通过插件方式注册新变体，不能靠配置 variants（该选项已在 v3 中移除）。核心是调用 addVariant 并传入合法的选择器字符串。
- 在
tailwind.config.js的plugins: []中添加函数式插件 - 使用
&:focus:hover（注意顺序：宿主元素先满足:focus，再被 hover） - 类名建议用连字符分隔（如
focus-hover），避免和未来内置变体冲突 - 示例代码：
plugins: [
function({ addVariant }) {
addVariant('focus-hover', '&:focus:hover')
}
]
之后即可使用 focus-hover:bg-indigo-100，它会生成 .focus-hover\:bg-indigo-100:focus:hover { ... }
哪些组合值得加？哪些纯属徒劳
不是所有伪类组合都有实际意义。加之前先问：这个状态是否真实存在、是否需要独立样式反馈？
- ✅ 值得加：
focus-hover（输入框已聚焦又被悬停）、hover-active（按钮悬停中点击瞬间强化反馈） - ⚠️ 慎加：
disabled-hover（禁用态本不该响应 hover，应优先用disabled:opacity-50） - ❌ 别加：
hover:focus:active（浏览器不会同时触发三者；移动端无 hover；桌面端 :active 在鼠标移出时即失效） - 替代方案：对需要精细控制的状态，用
data-属性 + JS 切换类，比如data-state="pressed"配合data-[state=pressed]:bg-red-600
group 和 peer 不能替代伪类嵌套
有人试图用 group-hover:group-focus: 模拟嵌套，这是无效的——Tailwind 不解析多级变体链，group-focus: 本身就不合法（只有 group-hover:、group-focus: 单独存在，不能连写）。
-
group只作用于直接子元素，且仅支持预设变体（group-hover、group-focus-within等） -
peer同理，peer-hover:peer-focus:会被忽略 - 若需跨元素联动状态（如 checkbox 选中时 sibling label 变色），用
peer-checked+sibling工具类更可靠
真正难搞的从来不是怎么写类名，而是判断哪些状态组合在真实交互中确实会发生、是否值得用 CSS 控制——多数时候，一个 focus-visible: 加一个 hover: 已覆盖 95% 场景，强行塞进第三层只会增加维护成本和构建体积。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
