Tailwind CSS v3中enabled修饰符无法正常工作的问题排查

针对你遇到的enabled:hover修饰符在React项目中不生效的问题，结合你的配置和使用场景，可能的原因及解决方法如下：

• @tailwindcss/forms插件的样式冲突
  该插件会为表单元素（如button）注入基础样式，其中可能包含对:enabled伪类的默认样式声明，导致你的enabled:hover优先级被覆盖。可以尝试两种解决方式：

  1. 调整修饰符顺序，使用hover:enabled:bg-white（Tailwind修饰符顺序遵循从内到外匹配CSS优先级，hover前置会让组合伪类的优先级更明确）；
  2. 在插件配置中切换到类策略，避免全局样式注入：

     // tailwind.config.js
     plugins: [
       require('@tailwindcss/forms')({
         strategy: 'class',
       }),
     ]
     

• Tailwind版本存在已知bug
  你使用的v3.0.24是较早期的版本，该版本可能存在enabled与其他状态修饰符组合的兼容性问题。建议升级到最新的Tailwind v3稳定版本，旧版本的伪类组合bug在后续更新中已被修复。

• 检查自定义主题的隐性影响
  确认bg-black-100这个自定义颜色是否正确定义在主题的colors对象中；同时排查是否有其他全局CSS（如自定义重置样式）对button的:enabled状态进行了样式覆盖。

你还可以通过浏览器开发者工具查看button元素的CSS规则，确认enabled:hover对应的样式是否被其他规则覆盖，这是快速定位优先级问题的有效方法。

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