group类是group-hover生效的硬性前提，缺失则CSS不生成；需确保父元素有group类、尺寸非零、pointer-events正常、z-index合理，且group-hover类在源码中字面量存在。
父元素没加 group 类，group-hover 根本不会编译进 CSS
这是最常见也最容易被忽略的硬性前提：Tailwind 的 group-hover 不是“监听 hover 后自动激活 group”的机制，而是构建时就依赖 group 类存在来生成对应 CSS 规则。没写 group，CSS 文件里压根就没有这条规则，浏览器自然无从触发。
-
hover:group或group-hover:opacity-100单独写在父元素上——无效，hover:修饰符不作用于group - 写了
group-hover:xxx但父元素只有relative、flex等类，缺group——编译器直接跳过，不生成任何相关样式 - 使用了自定义前缀（如
prefix: "tw-"），却仍写group而非tw-group——类名不匹配，选择器失效
group 必须加在能真正捕获鼠标事件的容器上
DOM 上加了 group 不代表它就能响应 hover；如果该元素尺寸为 0、被遮挡、或设置了 pointer-events: none，那悬停事件根本不会到达它，group-hover 自然静默。
- 检查 computed 样式中 width/height 是否为 0（常见于仅含空格、未设 display 或 flex item 未设 basis）
- 父容器有
z-index但兄弟元素层级更高，或被position: absolute元素覆盖——用开发者工具高亮 hover 区域确认实际触发范围 - 父元素或其任意祖先设了
pointer-events: none——逐级检查，哪怕只是临时调试加的 class - Flex/Grid 容器内子项用了
transform或absolute，导致视觉区域和事件区域错位——把group提到 flex/grid 容器层，而非某个 item 上
子元素的 group-hover 类必须出现在真实 DOM 路径中
Tailwind 默认启用 content purge（现称 content），只会保留源码中“明确出现”的 class 组合。动态插入、条件渲染、或 JS 拼接的 group-hover:xxx 若未在模板字符串/JSX 中字面量存在，会被清除。
- React/Vue 中，
group在组件内部 div 上，但触发元素（如 button）是通过插槽或子组件传入——若插槽内容没在父组件模板中显式写出group-hover，它就不会进最终 CSS - 用了
md:group-hover:opacity-100却漏掉md:group——断点修饰符需成对出现，否则媒体查询内无group，规则不生效 - 子菜单等动态挂载内容（如 Headless UI Popover）不在初始 HTML 中——
group必须包裹整个逻辑块（包括 portal 目标容器），不能只包静态部分
绝对定位子元素导致 hover 区域误判
当 group-hover 用于覆盖层、图标等绝对定位元素时，它们容易脱离文档流并意外扩大可 hover 区域，造成“悬停 header 却触发 body 的 group-hover”这类误触发。
立即学习“前端免费学习笔记（深入）”；
- 确保
absolute元素的父容器设了relative，且自身top/left值严格限制在父盒内 - 给该父容器加
overflow-hidden，防止子元素溢出干扰邻近区块 - 避免
absolute元素设置过高的z-index覆盖上层兄弟元素——它会劫持鼠标事件，让本不该触发的group-hover响应 - 必要时用
pointer-events: auto强制恢复事件捕获，尤其在 transform 或 scale 后
group 所在元素是否真的“可悬停”——它的尺寸、层级、事件穿透性，以及它在构建流程中是否被 Tailwind 真实识别为有效上下文。 
