Tailwind构建前后样式异常：w-20优先级本地正常构建失效

核心原因 #

这是因为Tailwind工具类的优先级完全相同（均为单一类选择器），而开发与生产环境下CSS规则的生成顺序不一致，导致后声明的样式覆盖先声明的：

• 本地开发时，Tailwind的JIT编译器会严格按照代码中类的书写顺序生成CSS规则。比如你写了className="w-full w-20"，.w-full会先被输出，.w-20在后，后者覆盖前者，所以显示正常。
• 生产构建时，Vite会触发Tailwind的生产优化流程，同时会对CSS做压缩、排序处理。Tailwind在生产模式下会按内部预设的规则对类进行排序（比如按属性类型、字母顺序等），导致.w-full的规则被排在.w-20之后，最终前者覆盖后者，出现样式异常。

解决办法 #

1. 强制提升优先级：使用Tailwind的!important变体，将w-20改为!w-20，这样无论CSS规则顺序如何，该样式都会生效。
2. 避免冲突类共存：通过React的条件渲染逻辑，只加载当前场景需要的类，比如：

   <div className={isCompact ? "w-20" : "w-full"}></div>
   

3. 自定义工具类：如果需要固定的优先级，可以在Tailwind配置中自定义一个优先级更高的宽度类，不过这种方式不如前两种直接。

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