Tailwind CSS通过Props传入的自定义类无法覆盖已应用类的问题

首先纠正一个普遍的认知错误：HTML标签class属性里的类名排列顺序，完全不决定CSS样式的生效优先级。对于权重完全相同的CSS规则，哪个规则在最终加载的CSS文件里定义位置更靠后，哪个就会覆盖前面的同属性规则，和类在HTML里写在前还是后没有任何关系。

Tailwind 构建生成最终CSS文件时，工具类规则的写入顺序受源码扫描顺序、版本默认排序逻辑、自定义配置影响，并不会按照你在JSX里拼接类名的顺序排列规则。你遇到的宽度、背景类覆盖异常，本质就是w-20、bg-green-700对应的CSS规则在最终样式表里的位置，比w-60、bg-secondary-500更靠后，所以哪怕你把后两个类写在class属性的末尾，也会被前面的类对应的CSS规则覆盖。

另外你贴的两种写法本身也存在逻辑问题：模板字符串写法里硬编码了bg-green-700作为基础类，disabled状态下又额外拼接bg-secondary-500，会导致两个背景类同时存在；classNames写法里pointer-events-none的生效条件写死为true，会导致按钮无论是否disabled都无法点击。

• 从逻辑层面避免同属性冲突类同时绑定到元素上，不要依赖类名顺序控制优先级。
  把会被自定义属性、状态覆盖的基础类改成条件判断，同CSS属性的类保证同一时间只存在一个，参考写法：

  // 提前判断是否传入了宽度自定义类，有则跳过默认w-20
  const widthClass = customClass?.split(' ').some(cls => cls.startsWith('w-')) ? '' : 'w-20';
  const backgroundColor = disabled ? "bg-secondary-500" : "bg-green-700";
  
  // classNames 写法
  className={classNames(
    "my-2 p-2 text-white rounded capitalize hover:ease-in hover:scale-110 hover:duration-200",
    widthClass,
    backgroundColor,
    customClass,
    { "pointer-events-none": disabled }
  )}
  
  // 模板字符串写法
  className={`my-2 p-2 text-white rounded capitalize hover:ease-in hover:scale-110 hover:duration-200
    ${widthClass}
    ${disabled ? "pointer-events-none bg-secondary-500" : "bg-green-700"}
    ${customClass}
  `}
  

• 兜底方案：如果需要强制某个类生效，可以使用Tailwind的重要修饰符，在类名前加!提升权重，比如自定义类传!w-60、disabled状态类写!bg-secondary-500，这类带!important标记的规则会覆盖普通工具类，非特殊场景不推荐优先用这个方案。
• 不要随意修改Tailwind默认的CSS生成顺序配置，避免打乱工具类的内置优先级逻辑，引发更多样式覆盖问题。

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