如何为Tailwind所有基础颜色设置DEFAULT值为500？

你可以通过扩展Tailwind的主题配置，在不替换原有配色的前提下，为所有基础颜色添加DEFAULT值指向对应的500色调，具体实现如下：

步骤1：修改tailwind.config.js配置文件 #

在项目的tailwind.config.js中，导入Tailwind默认颜色集，遍历每个颜色并为其添加DEFAULT属性指向500值：

const { default: defaultColors } = require('tailwindcss/colors')

module.exports = {
  theme: {
    extend: {
      colors: Object.fromEntries(
        Object.entries(defaultColors).map(([colorName, colorShades]) => {
          // 仅为有500色调的颜色设置DEFAULT
          if (colorShades[500]) {
            return [colorName, { ...colorShades, DEFAULT: colorShades[500] }]
          }
          return [colorName, colorShades]
        })
      )
    }
  }
}

效果说明 #

配置完成后：

• bg-red、text-blue这类无后缀的颜色类，会完全等同于bg-red-500、text-blue-500的效果
• 原有的所有颜色深浅类（如red-100、blue-900）会被完整保留，不会被覆盖或替换

针对部分颜色单独配置（可选） #

如果你不需要为所有颜色设置，也可以单独指定目标颜色：

const { default: defaultColors } = require('tailwindcss/colors')

module.exports = {
  theme: {
    extend: {
      colors: {
        red: { ...defaultColors.red, DEFAULT: defaultColors.red[500] },
        green: { ...defaultColors.green, DEFAULT: defaultColors.green[500] }
        // 按需添加其他颜色
      }
    }
  }
}

关于Tailwind默认不设置的原因 #

Tailwind默认未将无后缀颜色指向500，主要是为了让开发者明确指定颜色深浅，避免歧义——不同场景下对“默认色”的需求可能不同，比如部分用户可能更倾向于浅色作为默认。不过500作为多数颜色的中间色调，确实是快速调试样式、作为颜色调整起点的合理选择。

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