如何自定义Tailwind蓝色基础色且保留blue-100等色阶类名

• 当前配置将blue字段直接设置为单个十六进制色值，覆盖了Tailwind默认blue对应的色阶对象结构（默认blue是包含100~950不同深浅色值的对象），因此所有带数字后缀的text-blue-*、bg-blue-*类都会失效。
• 即便配置写在extend字段下，只要blue键对应的值不是色阶对象，Tailwind也不会自动生成带数字后缀的色阶类。

方法1：自定义完整蓝色色阶 #

如果需要全量替换默认蓝色的所有色阶，同时保留色阶类名用法，可以直接给blue字段传入完整的色阶对象：

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        blue: {
          50: '#eff6ff',
          100: '#dbeafe',
          200: '#bfdbfe',
          300: '#93c5fd',
          400: '#60a5fa',
          500: '#5F99F7', // 替换为你需要的基础蓝色（一般对应500色阶）
          600: '#2563eb',
          700: '#1d4ed8',
          800: '#1e40af',
          900: '#1e3a8a',
          950: '#172554',
        }
      }
    }
  }
}

你可以根据需求调整各个色阶的色值，调整完成后原有text-blue-*类即可正常使用。

方法2：仅替换默认蓝色主色，保留其他色阶 #

如果你不想修改其他色阶，只想把蓝色的默认主色（也就是不带数字后缀的text-blue、bg-blue类对应的色值）改成你需要的#5F99F7，同时保留原有100~900色阶，可以按以下方式配置：

// tailwind.config.js
const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  theme: {
    extend: {
      colors: {
        blue: {
          ...defaultTheme.colors.blue,
          DEFAULT: '#5F99F7'
        }
      }
    }
  }
}

其中DEFAULT字段对应的就是不带数字后缀的blue类的色值，通过展开运算符保留了Tailwind默认蓝色的所有色阶，原有text-blue-100等类都不会受影响。

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