Tailwind v3.1及以上版本bg-primary无法覆盖bg-white的问题咨询

核心原因：Tailwind v3.1.0的CSS生成顺序bug #

你遇到的是Tailwind CSS v3.1.0版本中的一个已知bug：当通过theme.extend.colors定义自定义颜色（如primary）时，这些颜色对应的CSS类会被错误地生成在默认颜色类（如bg-white）的前面。

由于CSS中优先级相同的选择器，后定义的规则会覆盖先定义的，所以当你同时使用bg-white和bg-primary时，bg-white的CSS规则在后面，会覆盖bg-primary的样式，导致显示白色。

而bg-new-primary能正常覆盖bg-white的原因，是颜色名的字母排序：new-primary的字母顺序靠后，它的CSS类生成位置比white更晚，所以能覆盖默认颜色规则。

为什么添加theme: { colors: {} }能解决？ #

当你在主题配置中添加colors: {}时，会清空Tailwind的默认颜色集合，此时默认颜色（如white）不会自动生成，需要你通过theme.extend.colors手动添加。此时所有颜色类（包括自定义的primary和手动添加的white）都是通过extend生成的，它们的CSS规则顺序会按照颜色名的字母排序或定义顺序排列，自定义颜色类可以正常覆盖默认颜色类。

解决方案（无需修改大量类名） #

1. 升级到Tailwind v3.1.1及以上版本：官方在v3.1.1中修复了这个CSS生成顺序的bug，恢复了“扩展颜色类生成在默认颜色类之后”的正确行为，自定义颜色可以正常覆盖默认颜色。
2. 临时配置方案：如果暂时无法升级，可以在theme.colors中显式定义你的自定义颜色（而非仅通过extend），这样自定义颜色类会生成在默认颜色类之后，确保优先级正确：

// tailwind.config.js
module.exports = {
  theme: {
    colors: {
      primary: 'blue', // 直接在theme.colors中定义，而非仅extend
      // 保留默认颜色：如果需要使用默认颜色，需手动引入
      ...require('tailwindcss/colors'),
    },
    extend: {
      colors: {
        'new-primary': 'green',
      },
    },
  },
}

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