必须用 theme.extend.colors 增量添加颜色，直接改 theme.colors 会清空所有默认色；自定义色需手动声明色阶对象（如 '500': '#3b82f6'）才能支持 -500 后缀；placeholder、stroke、fill 等需额外配置对应 extend 项。
直接改 theme.colors 会清空所有默认色，别这么干
写 theme: { colors: { brand: '#3b82f6' } } 看似简单，实际会让 bg-blue-500、text-gray-700 全部失效——Tailwind 不再加载内置色盘，只认你写的那一个 key。所有依赖默认色的工具类（比如 ring-blue-500、hover:bg-indigo-600）都会突然“消失”。这不是 bug，是设计如此：顶层 colors 是完全替换，不是合并。
必须用 theme.extend.colors 增量添加新颜色
这是唯一安全、被官方支持的扩展方式。自定义色和 blue、gray 平级共存，互不影响：
-
bg-brand-500和bg-blue-500都能用 - 支持所有基础工具类：
text-、bg-、border-、ring- - 键名含连字符（如
'dark-blue'）必须加单引号，否则解析失败 - 驼峰或纯字母数字（如
brandBlue、primary500）可不加引号，但可读性差，不推荐
示例正确配置：
module.exports = {
theme: {
extend: {
colors: {
'brand-blue': '#3b82f6',
'navy': { '50': '#f0f9ff', '500': '#1e3a8a', '900': '#1e293b' }
}
}
}
}
想用 -500 这类后缀？必须手动声明色阶对象
只写 'brand-blue': '#3b82f6'，Tailwind 只生成 bg-brand-blue 这一个类；bg-brand-blue-500 会报错“class not found”。因为 Tailwind 不为自定义色自动推导明暗梯度。
立即学习“前端免费学习笔记（深入）”；
- 键必须是字符串，如
'50'、'100'、'500'，不能是数字50 - 不用填满全部 50–900，按需选 3–5 个常用档位即可（比如
'100'、'500'、'900'） - 值必须是合法颜色格式：带
#的 HEX（#3b82f6）、RGB 字符串（'240 249 255'）、或已定义的 CSS 变量（var(--color-primary)）
placeholder、stroke、fill 这些不自动支持新颜色
Tailwind 默认只把 colors 映射到 background-color、color、border-color、ring-color 四类属性。像 placeholder:text-brand-blue-500 或 stroke-brand-blue-500 不会生效。
- 要支持 placeholder，得额外配
theme.extend.placeholderColor - SVG 描边需加
theme.extend.stroke - SVG 填充需加
theme.extend.fill - 这些扩展项也必须用对象形式，且键名同样要字符串化（
'50'、'500'）
容易忽略的一点：JIT 模式下，哪怕配置全对，如果模板里没真实用过 bg-brand-blue-500，它就不会出现在最终 CSS 中——不是配置无效，是根本没触发生成。上线前务必在 HTML 或 JSX 里写一次测试 class。
