TailwindCSS中如何降低hover类优先级 正确显示激活态样式

问题原因 #

当前写法不生效是CSS优先级规则导致：hover:border-gray-400和普通态的border-gray-700优先级一致，hover相关样式在Tailwind生成的CSS文件中顺序靠后，因此元素处于激活态时，鼠标悬停仍然会命中浅灰色边框的hover样式。
Tailwind原生支持状态叠加写法，不需要动态移除hover类就能实现效果，有两种常用实现方式： #

方案1：手动控制激活态时追加hover覆盖类（最适配现有业务逻辑） #

直接在激活态的判断分支里，同步追加激活态下的hover边框样式即可，修改后的代码如下：

<Tag
  className={`flex rounded border border-gray-200 bg-white hover:border-gray-400 ${active && 'border-gray-700 hover:border-gray-700'}`}
  {...props}
/>

实现逻辑：当active为true时，额外拼接的hover:border-gray-700和原有hover:border-gray-400优先级一致，因书写顺序靠后会自动覆盖浅灰色hover边框，激活态下鼠标悬停也会保持深灰色边框，完全符合需求。
额外注意：原代码中属性名clssName存在拼写错误，正确React属性名为className，拼写错误会导致所有样式类不生效。 #

方案2：配合表单原生选中态自动实现（无需手动维护active变量） #

如果规格标签是和原生radio/checkbox表单控件绑定实现选中效果，可以用Tailwind内置的peer修饰符，完全不需要手动写active状态判断，示例代码如下：

{/* 隐藏原生单选框 */}
<input type="radio" name="productSpec" className="peer hidden" id="spec-red" />
{/* 标签绑定单选框，自动响应选中态 */}
<Tag 
  htmlFor="spec-red"
  className="flex rounded border border-gray-200 bg-white hover:border-gray-400 peer-checked:border-gray-700 peer-checked:hover:border-gray-700"
>
  红色
</Tag>

这种写法的好处是选中逻辑完全交给原生表单实现，不需要在组件里维护额外的状态变量，更符合原生表单的交互逻辑。 #

通用规则：所有需要在特定状态下覆盖hover、focus等交互样式的场景，都可以用修饰符叠加的写法，比如激活态下覆盖聚焦样式就写激活态修饰符:focus:样式类，不需要动态移除基础交互类，维护成本更低。

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