最安全的方式是用 theme.extend.colors 增量扩展颜色；若需彻底替换默认色（如整套 blue），必须使用 theme.colors 全量定义并包含 50–900 色阶；新颜色需在模板中实际使用才能被 jit 编译生成，且需手动扩展 placeholdercolor、stroke、fill 等以支持对应工具类；深色模式下的变体需显式声明，无自动推导。
tailwind.config.js 里怎么覆盖默认颜色
直接改 theme.extend.colors 是最常用也最安全的方式，Tailwind 默认颜色（比如 blue、red）不会被清空，你只是在它们基础上加新颜色或重写某几个。如果想彻底替换全部默认色（比如把整个 blue 系列换成品牌蓝），得用 theme.colors 而不是 extend，否则旧的 bg-blue-500 还在，新配的可能叫 bg-brand-500，容易混乱。
常见错误是写成这样：
module.exports = {
theme: {
extend: {
colors: {
blue: '#1a56db' // ❌ 这不会覆盖默认 blue，只新增一个同名 key，但 Tailwind 内部优先读默认
}
}
}
}
正确做法是明确用 theme.colors 全量定义，或用 extend 加前缀避免冲突：
- 全量替换：用
theme.colors，并手动复制/调整所有需要的色阶（50–900） - 增量扩展：用
theme.extend.colors，但起新名字，比如brandBlue、primary - 局部覆盖：用
theme.extend.colors+blue对象，但必须包含完整色阶，不能只写一个值
修改后 class 不生效？检查 purge 和 JIT 模式
Tailwind 3.0+ 默认启用 JIT 编译，它只生成你在模板里实际用到的 class。如果你在 tailwind.config.js 新增了 colors.brandPurple，但 HTML 里还没写过 text-brandPurple-500，这个 class 就不会被生成——不是配置失败，是没触发生成。
解决方法：
- 确保模板中已使用新 class（哪怕临时加个
<div class="bg-brandPurple-500"></div>测试） - 开发时可临时关掉 purging：把
purge或content数组设为空，或加!important规则测试是否为编译问题 - 检查
content配置路径是否覆盖你的模板文件（如src/**/*.{js,jsx,ts,tsx,html}）
错误现象示例：bg-brandPurple-500 在浏览器里没样式，开发者工具里查不到对应 CSS 规则——大概率是 JIT 没扫描到该 class 的使用位置。
如何让自定义颜色支持所有工具类（bg / text / border / ring…）
Tailwind 默认只把 colors 应用到 background-color、text-color、border-color、ring-color 等几类工具上，但不会自动扩展到 fill（SVG）、stroke、placeholder-color 等。如果你配了 brandGreen 却发现 placeholder-brandGreen-400 不生效，是因为 placeholderColor 没被关联。
需要手动在 theme.extend 中补全：
module.exports = {
theme: {
extend: {
colors: { brandGreen: '#059669' },
placeholderColor: ({ theme }) => theme('colors'),
stroke: ({ theme }) => theme('colors'),
fill: ({ theme }) => theme('colors')
}
}
}
注意：placeholderColor、stroke、fill 这些键名是固定的，拼错或大小写不对（比如写成 placeholdercolor）会导致无效。
深色模式下怎么给自定义颜色配暗色变体
Tailwind 的 dark: 前缀依赖于 colors 配置本身是否提供暗色值，它不会自动推导。比如你定义了 brandYellow: '#f59e0b'，那 dark:bg-brandYellow-500 仍会用亮色值，看起来可能刺眼。
解决方案是把自定义色做成对象，显式定义亮/暗两套：
brandYellow: {
DEFAULT: '#f59e0b',
dark: '#d97706'
}
然后在 class 中用 dark:bg-brandYellow-dark；或者更统一的做法：用 theme.extend.colors 定义完整色阶，并在暗色模式下通过 darkMode: 'class' + CSS 自定义属性配合 JS 切换根节点 class，再用 color-mix() 或 HSL 调整——但这已经超出配置文件范围，属于主题系统设计层面了。
真正容易被忽略的是：深色模式不是“自动适配”，而是“按需声明”。你配了多少个暗色值，才能用多少个 dark:bg-xxx，没有捷径。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
