必须用 theme.extend.colors 增量添加，不能直接写 theme.colors，否则默认色盘全丢，text-blue-500 等基础类立即失效；因为 tailwind 内置色是硬编码的，直接赋值会彻底替换 colors 对象，而 extend.colors 是浅合并，确保自定义色与默认色平级共存。
必须用 theme.extend.colors 增量添加，不能直接写 theme.colors，否则默认色盘全丢，text-blue-500 这类基础类立刻失效。
为什么 theme.extend.colors 是唯一安全入口
Tailwind 的内置颜色（blue、gray、red）是硬编码在源码里的，构建时和配置合并。直接赋值 theme.colors = { ... } 会彻底替换掉整个对象，连 border-gray-200 都会消失。而 extend.colors 是浅合并——你的新键名（比如 'brand-red'）和默认色平级共存，互不影响。
- ✅ 正确：
extend: { colors: { 'brand-red': '#e53e3e' } } - ❌ 错误：
colors: { 'brand-red': '#e53e3e' }（顶层写，清空默认） - ⚠️ 伪正确：
extend: { colors: { blue: '#1a56db' } }（键名冲突，JIT 编译仍用内置blue）
bg-brand-red-500 不生效？你没声明色阶
只写 'brand-red': '#e53e3e' 只生成 bg-brand-red 和 text-brand-red 这种无后缀类。所有带数字后缀的（-50、-100…-900）必须手动定义为对象：
extend: {
colors: {
'brand-red': {
'50': '#fff5f5',
'100': '#fee2e2',
'200': '#fecaca',
'300': '#fca5a5',
'400': '#f87171',
'500': '#ef4444',
'600': '#dc2626',
'700': '#b91c1c',
'800': '#991b1b',
'900': '#7f1d1d'
}
}
}
键名必须是字符串（'50'，不是 50），值必须是合法颜色值（HEX、RGB、HSL 或 CSS 变量）。漏掉任意一级，对应类就不会生成。
支持 fill、stroke、placeholder 等工具类？得单独扩展
Tailwind 默认只把 colors 映射到 background-color、color、border-color、ring-color 四类。想让 fill-brand-red-500 或 placeholder-brand-red-500 生效，必须显式扩展对应模块：
-
fill：加到theme.extend.fill -
stroke：加到theme.extend.stroke -
placeholderColor：加到theme.extend.placeholderColor
写法一致：{ 'brand-red': { '500': '#ef4444' } }。不加这一步，SVG 图标或输入框占位符就用不上你的自定义色。
最常被忽略的是 JIT 编译行为：哪怕配置全对，只要模板里没出现过 bg-brand-red-500，它就不会出现在最终 CSS 里。临时加个 <div class="bg-brand-red-500"></div> 测试，比反复重启服务更直接。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
