必须用 theme.extend.colors 增量添加，直接写 theme.colors 会清空所有默认色；自定义色阶需显式声明对象（如 '500': '#e53e3e'）；JIT 模式下须确保类名在源码中字面量出现或加入 safelist。
必须用 theme.extend.colors 增量添加，直接写 theme.colors 会清空所有默认色（bg-blue-500、text-gray-700 全部失效）——这不是 bug，是设计如此。
为什么 theme.colors = { } 会导致样式大面积崩坏
Tailwind 的 theme.colors 是全量替换逻辑，不是合并。你写 colors: { brand: '#3b82f6' }，它就只认 brand 这一个键，内置的 blue、gray、indigo 全部被丢弃。所有依赖这些色名的工具类（比如 ring-blue-500、hover:bg-indigo-600）瞬间失效。
真正安全的做法只有一条：theme.extend.colors。它和默认色盘合并后参与构建，bg-brand-500 和 bg-blue-500 可以共存。
- ✅ 正确：
extend: { colors: { 'brand-blue': '#3b82f6' } } - ❌ 错误：
colors: { 'brand-blue': '#3b82f6' }（顶层直接写） - ⚠️ 高危：
extend: { colors: { blue: '#1a56db' } }（不会覆盖默认blue，只是新增同名 key，但 JIT 编译优先读内置blue，你的配置实际被忽略）
brand-red 要支持 -500 后缀，必须手动声明色阶对象
只写 'brand-red': '#e53e3e'，Tailwind 只生成 bg-brand-red 这一个类；bg-brand-red-500 会报错“class not found”。因为 Tailwind 不为自定义色自动推导明暗梯度。
立即学习“前端免费学习笔记（深入）”；
要支持完整色阶，必须显式定义对象，且键必须是字符串（'50' 不是 50），值必须是合法颜色格式：
brand-red: {
'50': '#fff5f5',
'500': '#e53e3e',
'900': '#742a2a'
}
- 不用填满全部 50–900，按需选 3–5 个常用档位即可
- 连字符色名（如
'dark-blue'）必须加单引号，否则解析失败或静默丢弃 - 驼峰或纯字母数字（如
brandBlue）可不加引号，但可读性差，不推荐
配置写了，但 bg-brand-red-500 在浏览器里没效果？先查这三件事
JIT 模式下，Tailwind 只扫描源码中「字面量出现」的类名。你配得再全，模板里没真实写过这个 class，它就不会进最终 CSS。
- 临时加一行测试：
<div class="bg-brand-red-500"></div>，确保路径被content扫到 - 检查
content是否覆盖你的模板文件：Next.js 项目要同时包含app/**/*.{js,jsx,ts,tsx}和pages/**/*.{js,jsx,ts,tsx}；MDX/EJS/SSR 模板也得把对应路径加进去 - 动态拼接类名（如
className={`bg-${color}-500`}）必须显式加safelist，Tailwind 不执行 JavaScript，无法推断color的可能取值
想让 placeholder、stroke、fill 也支持自定义色？得单独配 extend
Tailwind 默认只把 colors 映射到 background-color、color、border-color、ring-color 四类属性。placeholder:text-brand-red-500 或 stroke-brand-red-500 不会生效。
要支持这些，得额外在 theme.extend 下加对应项：
-
placeholderColor：支持placeholder:text-类 -
stroke：支持 SVG 描边，如stroke-brand-red-500 -
fill：支持 SVG 填充，如fill-brand-red-500
这些扩展项也必须用对象形式，且键名同样要字符串化（'50'、'500'）——漏掉这点，placeholder:text-brand-red-500 就只是个无效 class。
