tailwind不支持hover:hover等多层伪类嵌套，因其变体系统仅支持单层前缀，必须用group+group-hover机制实现父容器悬停触发子元素样式变化。
不能直接用 hover:hover:bg-blue-500 这类写法——Tailwind 不支持多层 hover 嵌套语法，必须靠 group / group-hover 机制实现。
为什么 hover:hover 无效
Tailwind 的 hover: 是一个状态修饰符前缀，它只作用于**直接绑定的元素**，不递归、不嵌套。写 hover:hover:bg-red-400 会被忽略或编译失败，因为这不是合法的变体组合。
常见错误现象：父容器加了 hover:，子元素也加 hover:，结果子元素悬停时样式没变，或者父容器一 hover 就触发子元素样式（误以为“嵌套生效”）。
- 根本原因：CSS 里没有
:hover:hover这种伪类，浏览器不识别 - Tailwind 不生成这类规则，即使你写了，最终 CSS 里也不会出现对应代码
- 想让“子元素在父元素 hover 时变化”，得用
group+group-hover:
用 group 和 group-hover 实现真正嵌套悬停
group 是一个占位类，本身无样式，但它让后代中带 group-hover: 的元素能响应**该 group 容器的 hover 状态**——这才是 Tailwind 推荐的嵌套方案。
使用场景：卡片内图标在卡片 hover 时旋转；导航菜单项 hover 时展开二级菜单；按钮内文字和图标不同步变色。
- 给父容器加
group（必须是直接父级，不能跳层） - 子元素用
group-hover:xxx替代hover:xxx，比如group-hover:rotate-12 - 可叠加多个状态：
group-hover:text-blue-600 group-hover:scale-110 - 注意层级：如果中间有
relative或z-index干扰，可能影响触发区域，建议保持 DOM 路径干净
示例：
<div class="group p-4 bg-white rounded-lg"> <p class="text-gray-700">普通文字</p> <span class="group-hover:rotate-12 transition-transform duration-300">→</span> </div>
三层及以上嵌套怎么处理
Tailwind 原生只支持一层 group → group-hover: 链路。所谓“三层”，实际是「group 容器内再套一个 group 容器」，不是语法嵌套，而是 DOM 嵌套。
性能与可维护性提醒：
- 避免过度嵌套：
group套group套group会让 HTML 结构臃肿，且调试困难 - 超过两层后，推荐改用 JavaScript 控制类名（如
data-state="expanded"+data-[state=expanded]:xxx） - 若坚持纯 CSS，可用
peer+peer-hover:配合隐藏 checkbox 实现间接控制，但适用场景有限（如开关、折叠面板） - 所有
group-hover:类都依赖transition显式声明，否则无动画——别漏写transition-transform或transition-colors
移动端和无障碍注意事项
group-hover: 和 hover: 一样，在纯触摸设备上不可靠。iOS Safari 只在首次点击后模拟一次 hover，微信 WebView 常完全忽略。
- 关键交互不要只靠
group-hover:，必须提供 focus / active / click 降级路径 - 给可交互的 group 容器加
tabindex="0"，确保键盘用户能触达 - 在
@media (prefers-reduced-motion: reduce)下，group-hover:动画默认被禁用，需手动加motion-safe:group-hover:xxx显式启用 - 别在
group容器上同时用pointer-events:none，这会彻底切断所有 hover 触发
最易被忽略的一点：group 必须写在**最外层包裹容器**上，而不是某个子 div；一旦中间插入了非 block 元素（比如 <span></span> 或未设 display 的标签），group-hover 就会断链。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
