必须用 theme.extend.colors 增量扩展，直接写 theme.colors 会清空默认色盘导致 bg-blue-500 失效；自定义色需定义为字符串键色阶对象才支持 -500 后缀；jit 模式下须在模板中真实使用类并重启服务。
直接写 theme.colors 会清空所有默认色
这不是“覆盖失败”，而是彻底替换了 Tailwind 的内置颜色对象。Tailwind 默认的 blue、gray、red 等完整色阶（50–900）只存在于其源码预设中，一旦你在配置里写成 theme: { colors: { primary: '#3b82f6' } }，整个 colors 就变成只有 primary 的空壳——bg-blue-500、text-gray-700 全部失效，因为它们对应的颜色数据已丢失。
theme.extend.colors 是唯一安全的增量入口
Tailwind 明确设计 extend 为叠加逻辑：它把你的新增项合并进默认主题，而不是替换。你加的 brand 和原有的 blue 平级共存，bg-brand-500 和 bg-blue-500 都能用。
- 错误写法：
extend: { colors: { blue: '#1a56db' } }→ 不会覆盖默认blue，只新增一个同名 key，但 JIT 编译仍优先读内置值 - 正确做法：要么起新名（如
brandBlue），要么全量重写blue对象并补全'50'到'900'所有色阶 - 键名必须是字符串（
'500'），不能是数字500，否则构建直接报错
自定义颜色不支持 -500 后缀？因为你没定义色阶对象
写 'brand': '#3b82f6' 只生成 bg-brand；要支持 bg-brand-500，必须把颜色声明为对象：
theme: {
extend: {
colors: {
brand: {
'50': '#f0f9ff',
'100': '#e0f2fe',
'500': '#3b82f6',
'900': '#1d4ed8'
}
}
}
}
不用填满全部档位，选 3–5 个项目实际用到的即可。填太多只会增大 CSS 体积。
颜色生效了但 class 找不到？JIT 模式只编译实际使用的类
Tailwind v3+ 默认启用 JIT 编译，它不会为你配置但未在模板中出现的 class 生成 CSS 规则。即使 tailwind.config.js 写对了，bg-brand-500 在 HTML 或 JSX 中没出现过，浏览器开发者工具里就查不到对应样式。
- 临时验证：在任意页面加个
<div class="bg-brand-500"></div> - 检查
content配置是否覆盖所有模板路径（如src/**/*.{js,jsx,ts,tsx,html}） - 改完配置后必须重启开发服务（Vite/Next.js 不热更新 config 变更）
- 生产构建失效？大概率是
content没包含动态拼接 class 的文件，或没加safelist
placeholder:text-brand-500、stroke-brand-500）都需要手动扩展，Tailwind 不会自动把新颜色映射到这些属性上。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
