Tailwind 的 hover:text-white 默认仅作用于直接应用该类的元素；若需让父级 hover 状态影响多个子元素，应使用 group + group-hover 机制，而非依赖继承。

tailwind 的 `hover:text-white` 默认仅作用于直接应用该类的元素；若需让父级 hover 状态影响多个子元素，应使用 `group` + `group-hover` 机制，而非依赖继承。

在 Tailwind CSS 中，伪类如 hover: 是绑定在当前元素自身状态上的。当你将 hover:text-white 写在父

上时，它只改变该

的文本颜色（若其有文本内容），而不会自动“继承”或“传播”到子 元素——尤其当子元素自身已定义了 text-gray-500 这类显式文本颜色时，CSS 层叠规则会使其覆盖父级 hover 的 color 值。

✅ 正确解法：使用 group 和 group-hover
group 是 Tailwind 提供的“父级状态标记”工具。它本身不产生样式，但为后代元素启用基于父级交互状态的条件样式：

<div className="flex flex-col 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:text-white 显式声明：“当父级处于 hover 状态时，我应用 white 文本色”；
• 每个子元素可独立控制是否响应、响应何种样式（例如仅第一个加粗，第二个保留默认字体权重）。

⚠️ 注意事项：

• group 必须直接应用于最近的、包含目标子元素的祖先容器（不能跨多层嵌套跳过）；
• group-hover 只对 group 的直系或深层后代生效（非兄弟/非后代元素无效）；
• 避免滥用：若所有子元素样式完全一致，也可用 group-hover:*:text-white（需开启 Arbitrary Variants 支持），但语义清晰性不如显式添加更佳；
• 不要混淆 hover:（自身状态）与 group-hover:（父级状态），二者触发逻辑完全不同。

? 小结：Tailwind 的原子化设计强调显式、可控的样式绑定。group/group-hover 是解决“父级交互驱动子级样式”这一常见需求的标准模式，既符合 CSS 作用域原则，又保持代码可读性与维护性。