不能直接覆盖默认调色板，只能安全扩展；直接写theme.colors会清空内置blue、gray等全部色盘，导致bg-blue-500等失效，必须用theme.extend.colors并显式声明色阶对象如'brand': { '500': '#3b82f6' }。
不能直接覆盖默认调色板，只能安全扩展；想换掉 blue 或 gray 这类内置色，必须全量重写整个色阶对象，否则会失效或被忽略。
为什么 theme.colors 直接赋值会导致样式崩坏
写成 theme: { colors: { brand: '#3b82f6' } } 会彻底清空 Tailwind 内置的 blue、gray、red 等全部色盘。不是“覆盖 blue”，而是“删掉所有颜色”。结果是 bg-blue-500、text-gray-700、border-red-300 全部找不到对应 CSS 规则。
- Tailwind 的工具类（如
hover:bg-blue-600）隐式依赖完整色阶，缺一不可 - 即使只加一个自定义色，也绝不能碰顶层
colors字段 - 唯一安全入口是
theme.extend.colors，它和默认色盘合并后参与 JIT 编译
如何让 bg-brand-500 真正生成 CSS 规则
只写 'brand': '#3b82f6'，JIT 编译器只会产出 bg-brand，而 bg-brand-500 根本不存在——Tailwind 不会对自定义色自动推导深浅梯度。
- 必须显式定义为对象：
'brand': { '500': '#3b82f6', '700': '#1d4ed8' } - 键名必须是字符串数字，如
'500'，不能是500（JS 数字）或'medium' - 值支持 HEX（带
#）、RGB、HSL 或 CSS 变量（如var(--color-brand-500)） - 不用填满 50–900，但模板中用到的档位（如
bg-brand-500）必须存在
如何让自定义色生效于 placeholder、stroke、fill
Tailwind 默认只把 colors 映射到 background-color、color、border-color 和 ring-color 四类属性。表单占位符、SVG 描边/填充等完全不会继承。
- 需手动扩展对应字段：
theme.extend.placeholderColor、theme.extend.stroke、theme.extend.fill - 键名必须与
colors中一致（如都叫brand），否则无法联动 - 推荐用 CSS 变量而非硬编码 HEX：
placeholderColor: { brand: 'var(--color-brand-500)' } - 若用变量，确保运行时
:root或组件作用域中已声明该变量
JIT 模式下 class 不出现的三个真实原因
配置写了、重启了、HTML 里也用了 bg-brand-500，但 DevTools 里查不到规则？大概率是 JIT 没扫描到它。
-
content配置未覆盖模板路径，比如漏了src/**/*.tsx或pages/**/*.{js,ts} - 开发时可临时设
content: []强制生成全部 class，验证是否为扫描问题 - 修改配置后必须重启开发服务（
npm run dev），热更新不触发 JIT 重编译 - 深色模式变体（如
dark:bg-brand-700）不会自动推导，需手动在colors或变量中声明两套值
最常被忽略的是：自定义色名含连字符（如 'dark-blue'）必须加引号，否则 JS 解析失败，配置静默丢弃；还有，extend 下同名 key（如 extend: { colors: { blue: '#1a56db' } }）不会覆盖默认 blue，只是多一个无效键。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
