在 tailwind.config.js 中添加自定义颜色需写入 theme.extend.colors 对象，否则会覆盖默认色板；若要支持数字后缀（如 brand-blue-500），须将颜色值定义为含层级键的对象；推荐单独维护 colors.ts 统一管理以同步样式与 JS 逻辑。
如何在 tailwind.config.js 中添加自定义颜色而不覆盖默认色板
直接往 theme.extend.colors 里加对象就行，Tailwind 默认色板（如 blue、gray）不会被你新增的颜色影响。但注意：如果写在 theme.colors 下（没加 extend），整个色板会被完全替换，连 white 和 black 都会消失。
常见错误是复制网上示例时漏掉 extend 层级，结果跑完 npm run build 后所有默认背景色类（比如 bg-blue-500）全失效。
- 正确写法：
theme: { extend: { colors: { 'brand-blue': '#2563eb', 'alert-red': '#dc2626' } } } - 错误写法：
theme: { colors: { 'brand-blue': '#2563eb' } }—— 这会清空全部内置色 - 颜色名支持中划线和小驼峰，但生成的 class 名统一转为中划线，
'myColor': '#...' → my-color
为什么 indigo 能用 indigo-300，而我的 brand-blue 却不生成 brand-blue-500
Tailwind 不会自动为你的自定义颜色生成深浅梯度（如 -50, -100 … -900），它只对内置色名（blue、emerald 等）做预设映射。你加的 brand-blue 是一个单一值，不是调色板。
要让它支持数字后缀，得把值本身定义成一个对象：
立即学习“前端免费学习笔记（深入）”；
theme: {
extend: {
colors: {
'brand-blue': {
'50': '#f0f9ff',
'100': '#e0f2fe',
'500': '#2563eb',
'900': '#1d4ed8'
}
}
}
}
- 只要提供至少一个键（如
'500'），就能用bg-brand-blue-500 - 不强制填满 10 个层级，按项目实际需要定义即可
- 若想复用 Tailwind 原有灰阶逻辑，可导入
defaultTheme并参考其colors.gray结构
在 JS 中动态读取自定义颜色值（比如用于 Chart.js 或内联 style）
Tailwind 的配置对象本身是 JS 模块，可以导出或重用。但注意：tailwind.config.js 是构建时读取的，不能在浏览器运行时直接 import 它——Vite/Webpack 默认不把 config 暴露给前端代码。
更稳妥的做法是单独维护一份颜色定义（例如 src/lib/colors.ts），让 config 和业务代码共用：
// src/lib/colors.ts
export const COLORS = {
'brand-blue': {
50: '#f0f9ff',
500: '#2563eb',
},
'alert-red': '#dc2626',
};
- 然后在
tailwind.config.js中import { COLORS } from './src/lib/colors'并赋值到extend.colors - 组件里也能
import { COLORS }拿来设style={{ color: COLORS['brand-blue']['500'] }} - 避免硬编码颜色值，改一处，样式和 JS 行为同步更新
修改配置后 class 没生效？检查这三件事
不是所有改动都能热更新生效，尤其涉及颜色层级结构变化时：
- 删掉
.next/（Next.js）或dist/（Vite）等构建缓存目录，再重启 dev server - 确认
content字段包含所有使用新 class 的文件路径，否则 PurgeCSS 会把bg-brand-blue-500当作未使用类删掉 - 检查是否在 CSS 文件里重复写了
@layer utilities或@tailwind base，导致配置加载顺序错乱
最隐蔽的问题是：你在 JSX 里写了 className="bg-brand-blue-500"，但对应颜色定义在 theme.colors 而非 theme.extend.colors，此时构建不报错，但 class 根本不会被生成——Tailwind 安静地跳过了它。
