Tailwind CSS禁用状态下peer复选框伪类样式无法覆盖问题咨询

出现这个问题的核心原因是CSS选择器特异性相同，peer-checked:*和disabled:peer-checked:*的选择器权重一致，导致后定义的样式才会生效；另外也可能是你没有正确配置Tailwind的变体组合。

解决方案1：调整类的顺序 #

将disabled:peer-checked相关的类放在peer-checked类的后面，这样在CSS渲染时，后面的规则会覆盖前面的：

<!-- 正确顺序示例 -->
<div class="peer-checked:border-pink-500 peer-checked:before:bg-pink-500 disabled:peer-checked:border-gray-500 disabled:peer-checked:before:bg-gray-500 ..."></div>

解决方案2：确保变体组合已启用（Tailwind v2及以下） #

如果你使用的是Tailwind v2或更早版本，需要在配置文件中明确启用disabled和peer-checked的组合变体：

// tailwind.config.js
module.exports = {
  variants: {
    extend: {
      borderColor: ['disabled', 'peer-checked', 'disabled peer-checked'],
      backgroundColor: ['disabled', 'peer-checked', 'disabled peer-checked'],
    },
  },
}

原理说明 #

Tailwind的peer-checked生成的选择器是.peer:checked ~ &，而disabled:peer-checked生成的是.peer:disabled:checked ~ &——二者的特异性完全相同，所以HTML中类的顺序直接决定了样式优先级，后出现的类会覆盖先出现的。

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