group-hover没生效的主因是group类未正确添加到父容器或被PurgeCSS清除；需确认DOM中存在class="group"、Tailwind生成了对应CSS规则、DOM层级正确且无pointer-events:none拦截。
group-hover 没生效，90% 是因为 group 类根本没加在正确的父容器上，或者它被 PurgeCSS 清掉了——不是写法错，是结构或构建漏了。
确认 group 类是否真实存在于 DOM 中
浏览器 DevTools 里选中目标元素，看它的祖先节点有没有 class="group"。没有？那 group-hover 就是无源之水。hover:group 这种写法完全无效，Tailwind 不识别；group 必须是独立、显式、静态写的类名。
- 常见翻车：AI 生成的代码写了
<div class="hover:group"> → 直接删掉，换成 <code><div class="group"> <li>Vue/React 组件中，<code>group写在组件标签上（如<card group></card>），但实际渲染后没落到 DOM 的 div 上 → 改成在组件内部最外层真实<div class="group"> <li>用 <code>v-if或ngIf动态挂载的内容（比如 Popover 弹层），group类可能在初始 HTML 中不存在 → JIT 模式下不会编译对应group-hover规则 -
tailwind.config.js的content路径必须覆盖当前文件，尤其是 Vue/MDX/动态模板，漏掉.vue后缀等于全项目失效 - 动态拼接类名（如
class="group-hover:opacity-${show ? '100' : '0'}"）不会被扫描 → 改用safelist预声明：safelist: ['group-hover:opacity-100', 'group-hover:opacity-0'] - CDN 方式引入时，必须用官方 Play CDN：
<script src="https://cdn.tailwindcss.com"></script>；jsDelivr 等静态链接不支持group-hover运行时注入 - 按钮和图标分属两个并列
<div>，哪怕都加了 <code>group，也无法互相触发 → 必须共用同一个祖先<div class="group"> <li>父容器是 <code>flex或grid，子元素用了absolute定位且脱离文档流 → hover 区域可能为空，加min-height或padding确保有响应区 - 父级或祖父级设置了
pointer-events: none（常见于遮罩层、Portal、动画容器）→ 子元素 hover 彻底失能，临时调试可在 DevTools 里逐级关闭该样式 -
group-hover:translate-x-2没动画？缺transition-transform；只写hover:scale-105却没配transition→ 样式会瞬间跳变
检查 Tailwind 是否真的生成了 group-hover CSS 规则
打开 DevTools → Elements → 找到带 group-hover: 的元素 → Styles 面板里搜 :hover，看有没有类似 .group:hover .group-hover\:opacity-100 这样的规则。没有？说明构建流程没扫到这个类。
验证 DOM 层级与交互条件是否满足
group-hover 是 CSS 后代选择器行为，依赖真实 DOM 包裹关系和可触发 hover 的物理区域。
立即学习“前端免费学习笔记（深入）”；
真正卡住的地方往往不在“怎么写”，而在“谁在监听”和“谁在触发”——group 类是否被编译、是否真实存在、是否被 pointer-events 拦截、是否被 PurgeCSS 删除，这四点漏掉任何一个，group-hover 都只是 HTML 里的装饰文字。
