Tailwind 的 hover:text-white 默认仅作用于当前元素，无法自动继承到子元素；需借助 group 和 group-hover 机制显式触发子元素样式变更。
tailwind 的 `hover:text-white` 默认仅作用于当前元素，无法自动继承到子元素；需借助 `group` 和 `group-hover` 机制显式触发子元素样式变更。
在 Tailwind CSS 中，伪类修饰符（如 hover:）默认只影响直接应用该类的元素本身，而不会“穿透”到其子元素。这意味着即使你在父
上设置了 hover:bg-red-500 hover:text-white，text-white 也不会自动应用到内部的 子元素上——因为子元素并未处于 hover 状态，且 Tailwind 不支持 CSS 继承式文本颜色传递（尤其当子元素自身已声明 text-gray-500 时，它会覆盖父级 hover 的文本颜色）。
✅ 正确解法：使用 group + group-hover
group 是 Tailwind 提供的专门用于“基于父容器状态控制子元素样式”的实用工具。它本身不产生任何样式，仅作为状态标记；配合 group-hover: 等变体，即可精准控制子元素在父元素 hover 时的外观。
? 修改示例：
<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 类（必需），启用子元素状态绑定；
- 所有需响应 hover 的子元素，将 hover:text-white 替换为 group-hover:text-white；
- 原有子元素的静态样式（如 text-gray-500）仍保留，仅在父级 hover 时被 group-hover:text-white 覆盖；
- group-hover 支持任意 Tailwind 文本、背景、边框等属性，例如 group-hover:opacity-100、group-hover:scale-105。
⚠️ 注意事项：
- 不要遗漏 group 类，否则 group-hover 将无效；
- group-hover 仅对直系或深层子元素生效（无层级限制），但必须位于同一 DOM 树路径下；
- 若子元素自身有 hover: 类，它仍会独立响应鼠标交互，与 group-hover 共存时以 specificity 和顺序决定最终效果（建议避免冲突）。
? 进阶提示：你还可以组合多个状态，例如 group-focus:, group-active:, 甚至嵌套 group 实现多层联动，适用于卡片、菜单、折叠面板等交互组件。
