group必须写在真实DOM父元素上而非组件标签，因CSS选择器依赖实际后代关系；Portal、响应式断点不匹配、JS动态拼接class均会导致group-hover失效。
group类没写在真实父容器上，而是写在组件标签上
React/Vue 中最典型的失效场景：<Card class="group"><button class="group-hover:scale-105">Click</button></Card>。这行不通——group 必须出现在 Card 组件**内部渲染的根元素**上，比如它的 <div>，而不是组件标签本身。
原因很简单：Tailwind 编译出的 CSS 是 .group:hover .group-hover\:scale-105，它依赖 DOM 真实存在的后代关系。组件标签只是 JS 抽象层，不对应最终 HTML 的嵌套路径。
- 快速验证：打开 DevTools → Elements → 找到 button → 往上逐级看父元素有没有
class="group" - 修复方式：在
Card组件内部的根<div class="group">上加group，别漏掉 - 如果用插槽或
children透传，确保group-hover:xxx类也出现在该组件模板的源码中（不能只靠运行时拼接）
动态挂载内容（如 Portal）脱离了 group 容器的 DOM 范围
Headless UI、Radix 或自定义 Popover 常用 Portal 把下拉菜单挂到 <body> 下。此时即使你在触发按钮外层写了 group，菜单 DOM 已不在其子树内，group-hover 规则自然匹配不到。
例如：<div class="group"><button>Open</button></div>，但菜单被 Portal 挂到了 <body> 底下 → group-hover 对菜单无效。
立即学习“前端免费学习笔记（深入）”；
- 解决办法：把
group提到包裹整个交互逻辑的最外层，包括 Portal 容器目标节点（比如给<body>或某个固定 wrapper 加group） - 或者改用
group-focus-within+tabindex，它对焦点穿透更友好 - 绝对不要指望
group-hover跨document.body边界生效
响应式修饰符没配对，断点下 group 上下文丢失
写了 md:group-hover:opacity-100 却没写 md:group，结果在中屏下 group 类根本没应用，整个悬停链就断了。Tailwind 不会自动补全缺失的上下文类。
注意：md:group-hover:opacity-100 是非法写法，编译器直接跳过；必须显式并列声明：
class="md:group md:group-hover:opacity-100"
- 所有带断点前缀的
group-hover，都要求对应断点下的group同时存在 - 如果只在默认尺寸下需要 group，但悬停效果要响应式，那就拆成两段：
group md:group-hover:opacity-100 - 别混用：比如
sm:group和md:group-hover:opacity-100—— 断点不一致，规则永不匹配
JS 动态拼接 class 导致 JIT 模式下 group-hover 被 purge
class={`${isHover ? 'group-hover:opacity-100' : ''}` 这种写法在 JIT 模式下几乎必失效。Tailwind 构建时只扫描字面量字符串，不会执行 JS 逻辑，所以 group-hover:opacity-100 根本不会进 CSS 文件。
哪怕你确认 DOM 最终渲染出了这个类名，浏览器也找不到对应样式规则。
- 安全做法：把所有可能用到的
group-hover组合，提前写死在 JSX/模板里（哪怕用hidden或条件 class 包裹） - 或者改用内联 style + JS 控制，绕过 Tailwind 的静态分析
- 检查编译后 CSS：搜索
group-hover，如果搜不到，基本就是这个原因
group 少一个字母、少一个空格、或少一层嵌套，它就彻底失效。 
