必须用 group + group-hover: 实现父级悬停影响子元素，因为 hover: 仅作用于自身且 color 不继承；group 必须加在直接包裹子元素的容器上，子元素用 group-hover:text-white 等类名响应。
直接用 hover: 无法让父级悬停影响子元素样式——它只作用于自身，子元素不会继承或响应。必须用 group + group-hover: 组合。
为什么 hover:text-white 加在父元素上没用？
Tailwind 的 hover: 是绑定到当前元素的伪类状态，不是 CSS 继承机制。即使父 <div> 有 <code>hover:text-white，子元素仍保持自己的 text-gray-500（或任何显式设置），因为：
- CSS 中 color 不会从父级“穿透”到子级文本（除非子元素未设 color）
- Tailwind 生成的
.hover\:text-white:hover { color: #fff }规则只匹配该父元素本身 - 子元素没有 hover 状态，
hover:text-white对它完全不生效
正确写法：用 group 标记父容器，子元素用 group-hover:
这是 Tailwind 官方支持的父子联动模式，语义清晰、行为可控：
- 给父容器加
group类（无样式，仅作状态标记） - 所有需响应的子元素，把
hover:text-white换成group-hover:text-white - 支持任意属性：
group-hover:bg-blue-100、group-hover:scale-105、group-hover:opacity-90
示例：
立即学习“前端免费学习笔记（深入）”；
<div class="p-4 bg-white rounded group"> <h3 class="text-lg font-medium group-hover:text-blue-600">标题</h3> <p class="text-gray-600 group-hover:text-gray-800">描述文字</p> <button class="mt-2 text-sm group-hover:underline">操作按钮</button> </div>
容易踩的坑
这些细节不注意，group-hover 就会静默失效：
-
group必须加在**直接包裹目标子元素的容器**上，不能跳过中间层（比如父父级加了group，但子元素在中间一层 div 里，就无效） - 子元素若自身也写了
hover:text-red-500，它仍会独立响应鼠标，和group-hover共存；最终颜色由 CSS 特异性 + 类名顺序决定（Tailwind 默认后写的规则优先） - 如果父容器用了
absolute或fixed定位，且尺寸为 0 或被遮挡，hover 区域可能实际不可触达——建议加min-h-10或临时背景色验证触发范围 - 移动端 Safari 在某些情况下会延迟或不触发 hover，关键交互别只依赖它（比如展开菜单应同时支持 click/focus）
真正要控制的是 DOM 层级关系和类名位置，而不是猜“为什么 hover 没反应”。group 不是魔法，它只认紧邻的祖先路径和显式声明的 group-hover:。漏一个 group，整套逻辑就断掉。
