group类必须显式写为class="group"，否则group-hover规则不会被编译进css；父元素还需具备可悬停的尺寸、事件权限及正确dom位置。
group类没加对，group-hover就根本不会进CSS文件——不是“不触发”，是压根没这条规则。
父元素必须写 group，不能是 hover:group 或 group-
Tailwind 的 group-hover 是构建时静态生成的，依赖源码中明确出现 group 这个类名。它不是运行时监听或 JS 驱动的机制。
-
class="hover:group"→ 完全无效，hover:修饰符不作用于group，编译器直接跳过 -
class="group- hover:bg-blue-500"→ 类名被空格截断，group-不匹配任何 group 规则 -
class="gropu"或class="grouped"→ 拼写错误，JIT 模式下不会生成对应选择器 - 验证方法：打开 DevTools → Elements → 选中父元素 → 在 Styles 面板搜索
.group:hover，找不到就说明group没被识别
group 必须加在能真正响应 hover 的容器上
DOM 上写了 group，不代表它就能捕获鼠标事件。常见静默失效场景：
- 父元素宽高为
0（比如只含空格、未设display、flex item 缺flex-basis）→ 悬停区域不存在 - 父元素或任意祖先设置了
pointer-events: none→ 事件被拦截，子元素再怎么写group-hover都收不到 - 父元素被更高
z-index元素覆盖（如position: absolute的遮罩层）→ 实际悬停点不在它身上 - flex/grid 容器内子项用了
transform或absolute，导致视觉区域和事件区域错位 → 把group提到容器层，别挂在某个 item 上
带前缀配置时，group 类名必须同步改
如果你在 tailwind.config.js 中启用了 prefix: "tw-"，那所有相关类名都会重命名：
-
group→ 必须写成tw-group -
group-hover:opacity-100→ 必须写成tw-group-hover:tw-opacity-100 - 检查方式：打开编译后的 CSS 文件，搜索
tw-group或group，确认实际输出的类名 - 混用会彻底失效：比如 HTML 写
tw-group，但子元素写group-hover:opacity-100→ 选择器永远不匹配
动态内容或组件封装容易“断链”
group-hover 依赖严格的 DOM 后代关系：.group:hover .group-hover\:* 。一旦中间有封装层或动态挂载，路径就可能断裂：
- React/Vue 中，
group在<card></card>组件内部 div 上，但你在组件标签上写group-hover:scale-105→ 子元素不在group容器内，规则不生效 - Headless UI 的
Popover或Dropdown用 portal 动态挂载 DOM →group必须包裹整个逻辑块（包括 portal 目标容器），不能只包初始 HTML - JS 拼接类名：
class={`${isHover ? 'group-hover:opacity-100' : ''}`→ JIT 模式下不会扫描字符串，该规则会被 purge 掉 - 快速验证：把子元素临时剪出来，直接放在
class="group"的 div 里，不经过任何组件包装，看是否恢复
真正难排查的，往往不是语法错，而是 group 所在的那个元素——它看起来在那儿，但实际没尺寸、没事件权限、没被编译识别，或者根本不在真实的悬停路径上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
