group类必须显式加在父容器上，不能写成hover:group；它本身不产生样式，仅声明状态上下文，使后代元素的group-hover类生效。
group类必须显式加在父容器上，不能写成hover:group
直接写 hover:group 完全无效——Tailwind 编译器根本不识别这个类名，group 是一个独立的基础类，不是修饰符。它本身不产生任何样式，只起“声明状态上下文”的作用。只有当 DOM 中真实存在 class="group"，后续的 group-hover:text-white 才会被生成进 CSS。
常见错误结构：<div class="hover:group">文字</div> → DevTools 里搜不到 .group:hover 规则，说明根本没编译进去。
- 正确写法：
<div class="group"><span class="group-hover:text-blue-600">文字</span></div> - 检查方式：打开浏览器 DevTools，选中父元素，在 Styles 面板搜索
.group:hover，没出现就说明group没被识别 - React/Vue 组件中失效？大概率是组件根节点没加
group，临时把子元素提到外层包裹容器可快速验证
group-hover只对后代元素生效，不跨DOM层级
group-hover 本质是生成 .group:hover .group-hover\:xxx 这样的标准后代选择器，所以子元素必须真实位于 group 容器内部（哪怕嵌套多层），不能靠兄弟、同级或逻辑封装“透传”。
- ✅ 有效：
<div class="group"><button></button><svg class="group-hover:opacity-100"></svg></div> - ❌ 无效：
<div class="group"><button></button></div><svg class="group-hover:opacity-100"></svg>（svg是兄弟，非后代） - 绝对定位子元素若脱离文档流，可能收不到 hover 事件 → 给该元素加
pointer-events: auto - Flex/Grid 布局中，别把
group加在 item 上，而应加在 container 上，否则 hover 区域实际落在容器上，item 上的group形同虚设
响应式 + group-hover 必须拆开写，不能嵌套
md:group-hover:scale-110 是非法写法，Tailwind 会整个忽略。修饰符链不支持响应式前缀和状态修饰符混写，hover: 必须紧贴属性名。
立即学习“前端免费学习笔记（深入）”；
- 正确写法：
md:scale-100 md:group-hover:scale-110（并列，非嵌套） - 过渡动画也得配在同一断点下：
md:transition-transform md:duration-300，否则变化瞬切或不可见 - 如果只写了
group-hover:scale-110却没配transition-transform，动作就是生硬跳变 - PurgeCSS（现称
content）配置要覆盖真实模板路径，否则group+group-hover:xxx组合未出现在源码中，构建时直接被删掉
group-hover 和普通 hover 的触发区域完全不同
普通 hover:text-white 只依赖元素自身尺寸和交互范围；group-hover 的触发区域完全取决于你加 group 的那个容器的尺寸、display 类型、padding、是否设置了 min-height 等。
- 容器是空的 flex item？加
min-height: 1px或padding，否则鼠标悬停不到 - 用了
absolute的子元素视觉上盖住了父容器？检查是否意外遮挡了 hover 区域 - 移动端伪 hover 问题：iOS Safari 和 Android Chrome 会触发一次 hover 后立即消失，导致下划线类闪一下，需用
@media (hover: hover)条件控制 - 真正容易被忽略的是：
group-hover不是魔法开关，它只在已有基础样式前提下做变更；没写初始态（如opacity-0），group-hover:opacity-100就看不出变化
