Tailwind 的 hover:text-white 默认仅作用于直接应用该类的元素，无法自动继承到子元素；需借助 group 和 group-hover 机制实现父级悬停时统一控制子元素样式。
tailwind 的 `hover:text-white` 默认仅作用于直接应用该类的元素，无法自动继承到子元素；需借助 `group` 和 `group-hover` 机制实现父级悬停时统一控制子元素样式。
在 Tailwind CSS 中，伪类状态（如 hover:）默认不具备样式继承性：当你将 hover:text-white 写在父 <div> 上时，它只改变该 <div> 自身的文本颜色（若其有可渲染文本），而不会影响其子 <span> 元素的文本颜色——尤其当子元素自身已显式设置了 text-gray-500 这类覆盖性类名时，hover:text-white 更不会穿透生效。
✅ 正确解法是使用 Tailwind 的 group + group-hover 组合：
- 给父容器添加 group 类（仅作状态标记，无默认样式）；
- 在每个需要响应悬停的子元素上，用 group-hover:text-white 替代 hover:text-white；
- 这样，当鼠标悬停在 .group 容器上时，所有带 group-hover:* 的子元素都会触发对应样式。
示例代码如下：
<div className="flex flex-col bg-white hover:bg-red-500 group"> <span className="font-semibold group-hover:text-white">bold text</span> <span className="text-gray-500 group-hover:text-white">gray text</span> </div>
⚠️ 注意事项：
- group 必须直接加在触发悬停行为的祖先元素上（通常是直接父级）；
- group-hover: 只对直系或嵌套子元素生效，不跨 DOM 层级（如不能作用于兄弟元素）；
- 若子元素已有 text-* 类（如 text-gray-500），group-hover:text-white 会按 CSS 特异性规则正常覆盖（因二者同为 class，后出现或更具体者胜出；Tailwind 默认按写入顺序生成 CSS，group-hover 规则通常置于普通 text-* 之后，确保覆盖有效）；
- 避免滥用：若只需统一文字色，也可考虑移除子元素的 text-gray-500，改用 group-hover:text-white 统一控制，并通过 data-* 或额外类管理非悬停态样式。
通过 group 机制，你既能保持 HTML 结构清晰，又能精准、声明式地实现“父悬停 → 子响应”的交互逻辑，这是 Tailwind 推荐的响应式状态管理方式。
