group类必须显式加在父容器上，不能用hover:group代替；它仅声明上下文、不带样式，只有真实存在class="group"时group-hover才被编译生效；需确保容器可hover、后代结构正确、基础样式和过渡类已配置。
group 类必须显式加在父容器上，不能靠 hover:group 代替
直接写 hover:group 是无效的——Tailwind 不识别这种写法。group 是一个独立的基础类，不是修饰符，它本身不带任何样式，只起“声明上下文”的作用。只有当 DOM 中真实存在 class="group"，后续的 group-hover:text-blue-600 才会被编译进 CSS。
常见错误结构：<div class="hover:group">文字</div>
这个 hover:group 不会激活 group 上下文，group-hover 完全不会生效。
- 把
group加在能包裹所有联动元素的最外层容器上（不一定是直接父级，但必须是它们共同的祖先） - 确保该容器本身有可 hover 的区域（比如有
padding、display:block、或设置了min-height） - 如果容器是 flex/grid 子项，别把
group错加在子项上，而应加在 flex/grid 容器本身
group-hover 只对后代生效，不能跨兄弟或向上选择
CSS 没有父选择器，所以 group-hover 天然无法影响同级的“前面”元素。例如按钮和图标分属两个并列 <div>，哪怕都加了 <code>group，也无法通过其中一个触发另一个的样式。
可行结构必须满足 DOM 包裹关系：<div class="group">
<button class="group-hover:bg-gray-100">操作</button><svg class="group-hover:opacity-100"></svg>
</div>
- 按钮和图标必须在同一个
group容器内 - 图标可以嵌套多层（如
<div><svg></svg></div>），只要它是group的后代即可 - 如果用了绝对定位导致视觉错位，记得给该元素加
pointer-events: auto，否则 hover 事件可能没传到group容器
响应式断点下 group-hover 必须拆开写，不能嵌套
想在中等屏幕以上启用悬停缩放，写了 md:group-hover:scale-110？Tailwind 不支持这种写法。它会忽略整个类，因为修饰符链不合法。
正确写法必须拆成两部分：md:scale-100 md:group-hover:scale-110
- 先定义基础状态（
md:scale-100），再定义悬停态（md:group-hover:scale-110） - 如果不写
md:scale-100，而只写md:group-hover:scale-110，那么在 md 断点下该元素默认 scale 是 1，group-hover就没变化 - 同理，
lg:group-focus:ring-2也得配合lg:focus:ring-0或类似初始值才可靠
group-hover 生效的前提：目标元素已有对应基础类
group-hover:opacity-100 不会凭空生效。它只会在元素已有 opacity- 类的前提下才起作用，比如 opacity-0 或 opacity-50。
典型失效场景：
只写 group-hover:opacity-100，但元素没有初始 opacity- 类 → 无变化
想让图标悬停时右移，写了 group-hover:translate-x-2，但没配 transition-transform → 动作生硬或不可见
- 确保目标元素自带基础样式类（
opacity-0、text-gray-700、translate-x-0等） - 动画过渡必须单独加，
group-hover本身不带 transition - 深色模式下若用
dark:group-hover:text-yellow-300，需确认元素本身有dark:text-初始值，否则暗色下可能不生效
group 类——尤其在动态生成内容或条件渲染时，务必确保它真实存在于最终 DOM。
