group-hover不能直接生效是因为它依赖父容器显式添加group类作为状态锚点；若父元素未加group，Tailwind构建时即跳过生成对应CSS规则，如.group:hover .group-hover\:scale-105。
group-hover 为什么不能直接写在子元素上就生效
因为 group-hover 不是独立状态，它依赖父容器显式声明 group 类作为“状态作用域锚点”。没加 group 的父元素，哪怕结构上是祖先，group-hover:text-white 也完全不会生成对应 CSS 规则——Tailwind 在构建时就跳过了这类无效变体。
常见错误现象：group-hover:scale-105 写了但毫无反应；检查 computed styles 发现压根没生成 .group:hover .group-hover\:scale-105 这类规则。
-
group必须加在**最靠近目标子元素的父容器**上，不能跨层（比如中间隔着div.relative却把group加在外层section） - 若父容器本身已有
hover:bg-gray-100，group可与之共存，互不影响 - React/Vue 中用
className或class添加即可，无需额外配置（默认已启用group插件）
怎么让多个子元素在父 hover 时分别执行不同动作
每个子元素独立加 group-hover: 类，不需要统一逻辑。Tailwind 不强制“全有或全无”，你可以精确控制谁动、怎么动。
使用场景：卡片悬停时，标题放大、图标旋转、文字变色、边框加阴影——全部可并行触发。
- 标题：
group-hover:scale-105 - 图标：
group-hover:rotate-12 - 描述文字：
group-hover:text-blue-600 - 卡片容器本身：
group-hover:shadow-lg
注意：所有这些 group-hover: 类都写在各自元素上，不是堆在一个地方；它们共享同一个父级 group 上下文，但样式彼此隔离。
group-hover 和子元素自身 hover 同时存在会冲突吗
会，但冲突方式可控——取决于 CSS 特异性（specificity）和 class 列表顺序，而非随机覆盖。
例如：group-hover:text-red-500 hover:text-blue-500 写在同一元素上，鼠标悬停该元素时，最终生效的是后写的那个（hover:text-blue-500），因为两者权重相同，后者在 HTML class 属性中靠后。
- 想让父级 hover 优先？把
group-hover:放 class 列表前面 - 想保留子元素自身交互（如按钮图标点击旋转）？把
hover:放后面，并只改rotate或opacity等不重叠属性 - 绝对避免同时对同一属性写两个值，比如
group-hover:text-white hover:text-black——会导致视觉抖动或不可预测切换
移动端上 group-hover 还能用吗
不能依赖，但可以降级。iOS Safari 和多数安卓 WebView 对 :hover 支持极弱：首次点击可能触发一次，之后失效，甚至卡在 hover 态不退出。
真实项目中，纯靠 group-hover 做关键交互会出问题，尤其当用户用手指操作时。
- 按钮类交互，优先用
active:scale-95模拟按下反馈 - 需要悬停+点击双模式（如下拉菜单），改用
focus-within:+tabindex="0"，兼顾键盘与触控 - 若必须保留悬停效果，建议仅用于非核心功能（如装饰性动画），并确保无
pointer-events: none干扰
真正容易被忽略的是 DOM 层级判断——group 加错一层，整个联动就静默失效，而浏览器控制台几乎不报错，只能靠手动删减 DOM 逐层排查。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
