在 tailwind.config.js 中添加自定义颜色需写入 theme.extend.colors 下，如 'brand-red': '#e53e3e'；若需色阶变体，必须定义为对象并指定 '50'、'100' 等字符串键；覆盖 theme.colors.gray 会影响所有 gray- 类，建议新增命名避免破坏；暗色模式需手动定义或配合 css 变量实现。
tailwind.config.js 里怎么加新颜色
直接在 theme.extend.colors 下加键值对就行，不是覆盖整个 colors 对象。Tailwind 默认的 gray、blue 等属于基础色盘，你加的自定义色会和它们平级使用。
常见错误是写成 theme.colors = { ... }，这会清空所有默认色，导致 text-blue-500 突然失效；或者漏掉 extend，配置直接被忽略。
- 正确写法：
theme: { extend: { colors: { 'brand-red': '#e53e3e', 'navy': '#2c3e50' } } } - 之后就能用
bg-brand-red或text-navy，无需额外生成类名 - 颜色值支持 HEX、RGB、HSL，也支持 CSS 变量（如
var(--color-primary)），但变量需确保运行时已定义
如何让自定义色支持所有间距/透明度变体
Tailwind 默认只给内置色（如 blue）生成 -50 到 -900 和 -transparent 等后缀类。自定义色默认只有原始值，bg-brand-red-500 会报错——因为根本没生成这个类。
解决方法是把颜色定义成对象，显式声明每个色阶。这不是可选项，是必须步骤。
立即学习“前端免费学习笔记（深入）”；
- 写成对象：
'brand-red': { '50': '#fff5f5', '100': '#fed7d7', '500': '#e53e3e', '900': '#742a2a' } - 键名必须是字符串数字（
'50'不是50），否则构建时报错 - 不用填满全部色阶，按项目实际需要选几个常用档位即可，减少 CSS 体积
修改 theme.colors.gray 影响哪些已有类
直接改 theme.colors.gray 是覆盖行为，所有用到 gray 的类都会变——比如 border-gray-200、text-gray-700、bg-gray-50 全部走新定义。这很危险，尤其团队协作时容易引发视觉回归问题。
更稳妥的做法是保留原 gray，另起一个名字（如 ui-gray），旧代码不动，新组件逐步迁入。
- 如果真要覆盖：确认设计系统已统一更新灰阶，并同步检查
ring-gray-400、placeholder-gray-400等衍生类是否仍符合预期 - 注意
gray还被用在divide-gray-200、focus:ring-gray-500等复合工具类中，影响面比表面看的广 - 开发时开浏览器 DevTools 搜索
gray-，快速定位潜在变动点
dark mode 下怎么让自定义色自动切换
Tailwind 本身不自动为自定义色推导暗色变体。你写 bg-brand-red，它不会在 dark: 前缀下自动换成深红——除非你手动定义两套。
最简方案是在 colors 里用嵌套对象 + darkMode: 'class' 配合 CSS 变量，但要注意优先级和构建时机。
- 推荐做法：定义两组键，如
'brand-red': { DEFAULT: '#e53e3e', dark: '#c53030' }，再在 CSS 中用.dark .bg-brand-red { background-color: var(--brand-red-dark) }补齐 - 更干净的解法是改用 CSS 自定义属性，在
tailwind.config.js里配colors: { 'brand-red': 'var(--color-brand-red)' }，然后在:root和.dark下分别设变量值 - 别依赖
dark:直接修饰自定义色名（如dark:bg-brand-red-dark），这种类不会被 Tailwind 自动生出，得自己写
gray-、border-、ring-，比反复刷新页面试效果更省时间。 
