group必须显式加在父容器上，不能用hover:group代替；group-hover仅对后代生效，需确保DOM层级正确、子元素有基础类且父容器添加transition。
group 必须显式加在父容器上，不能靠 hover:group 代替
很多人写 hover:group 以为能激活 group 上下文，结果 group-hover:text-blue-600 完全不生效。Tailwind 不识别 hover:group 这种写法——group 是一个独立的基础类，不是修饰符，它本身不带样式，只起“声明状态作用域”的作用。
正确做法是：在能包裹所有联动子元素的最外层容器上，直接写 class="group"。这个容器必须有可 hover 的区域（比如设置了 padding、min-height，或本身就是块级可交互元素如 <button>）。
- 错误示例：
<div class="hover:group"><span class="group-hover:text-red-500">文本</span></div> - 正确示例：
<div class="group"><span class="group-hover:text-red-500">文本</span></div> - 如果容器是 flex 子项，别把
group加在子项上，而应加在 flex 容器本身
group-hover 只对后代生效，不跨层级也不作用于兄弟元素
group-hover 的触发逻辑严格依赖 DOM 树路径：它只影响 group 元素的直系或深层后代，不会穿透到兄弟节点，也不能向上影响父级，更不会跨过中间容器“跳层”生效。
常见误判场景是中间嵌套了 relative、absolute 或 z-index 元素，导致视觉上子元素“看起来在父容器内”，但实际 DOM 层级已断裂——这时 group-hover 就会失效。
立即学习“前端免费学习笔记（深入）”；
- 确保目标子元素在 HTML 中确实是
group容器的后代（即闭合标签在</div>内） - 避免用
position: absolute把子元素移出正常流，除非你同时给父容器加relative - 不要试图让兄弟
<div>响应另一个<div class="group">的 hover 状态
子元素需显式声明 group-hover，且基础类不能缺失
group-hover:text-white 不是万能覆盖器。它只会在对应属性上有基础类的前提下才生效。比如你想让文字悬停变白，子元素必须先有 text-gray-500 这类基础文本色类，否则 group-hover:text-white 不会编译进 CSS。
Tailwind 的修饰符机制要求“同类基础类存在”，hover: 和 group-hover: 都遵循这一规则。另外，多个 group-hover 可叠加，比如 group-hover:text-blue-600 group-hover:scale-105。
- 错误写法：
<span class="group-hover:text-white">文本</span>（无text-*基础类） - 正确写法：
<span class="text-gray-500 group-hover:text-white">文本</span> - 支持任意 Tailwind 属性：
group-hover:opacity-100、group-hover:rotate-12、group-hover:after:w-full
过渡动画必须手动加 transition，否则变化生硬
哪怕写了 group-hover:scale-105 或 group-hover:opacity-80，默认也不会有动画效果——Tailwind 不自动注入 transition 类。没有过渡，样式切换就是瞬间完成，体验很差。
过渡类要加在**触发 hover 的容器上**（即带 group 的那个元素），而不是子元素。因为 hover 状态发生在父级，CSS 过渡需要绑定在状态源上。
- 推荐组合：
transition-all duration-200 ease-in-out - 更精细控制可拆分：
transition-colors duration-200、transition-transform duration-300 - 注意：移动端无 hover，所以这类效果天然只对桌面设备有效；触屏端需 JS 模拟
group-hover 就像没通电的开关，看着在，按下去却没反应。 
