TailwindCSS父元素hover样式失效：子元素description颜色优先级问题

问题核心是：子元素description上的text-secondary-600是直接绑定的样式类，优先级高于父级继承的hover:text-white，所以悬停时颜色不会更新。以下是两种可行的解决方式：

方法1：使用Tailwind的Group状态（推荐） #

给父级容器添加group类，然后给description元素追加group-hover:text-white类，利用Tailwind的组状态特性，让父级悬停时触发子元素的hover样式，其优先级足够覆盖原有的固定颜色类。

修改后的代码：

<div
  className={`border-solid border-border-light bg-screen-grey flex flex-col gap-[60px] items-start pt-8 pb-6 px-5 border-[0.5px] rounded-[8px] cursor-pointer hover:bg-primary-base hover:text-white group`}
>
  <div className="self-stretch flex flex-col gap-[24px] items-start">
    <div className="text-lg font-semibold leading-[32px] w-full">
      {label}
    </div>
    <div className="leading-[20px] text-secondary-600 text-base w-full group-hover:text-white">
      {description}
    </div>
  </div>
</div>

方法2：自定义CSS（备选） #

如果不想依赖Tailwind的group特性，可以直接通过CSS选择器控制父级悬停时的子元素样式：
在全局CSS文件中添加：

.card-container:hover .desc-text {
  color: white;
}

然后调整JSX代码：

<div
  className={`border-solid border-border-light bg-screen-grey flex flex-col gap-[60px] items-start pt-8 pb-6 px-5 border-[0.5px] rounded-[8px] cursor-pointer hover:bg-primary-base hover:text-white card-container`}
>
  <div className="self-stretch flex flex-col gap-[24px] items-start">
    <div className="text-lg font-semibold leading-[32px] w-full">
      {label}
    </div>
    <div className="leading-[20px] text-secondary-600 text-base w-full desc-text">
      {description}
    </div>
  </div>
</div>

内容的提问来源于stack exchange，提问作者misbamalik