必须用 theme.extend.colors 扩展颜色，直接赋值 theme.colors 会清空所有默认色导致 bg-blue-500 失效；自定义色需定义为含 '50'–'900' 字符串键的对象才支持 -500 等后缀，且 JIT 编译仅生成模板中实际使用的类。
直接改 theme.colors 会清空所有默认色，别这么干
你写 theme: { colors: { brand: '#3b82f6' } }，bg-blue-500、text-gray-700 全部失效——Tailwind 不是“覆盖 blue”，而是扔掉整个内置色盘。所有依赖默认色的工具类（比如 ring-blue-500、hover:bg-indigo-600）瞬间丢失样式。真正安全的做法只有一条：theme.extend.colors。它和默认色合并，既保留 bg-blue-500，又能用 bg-brand-500。
theme.extend.colors 里怎么写颜色才支持 -500 这类后缀
写成单值，比如 'brand': '#3b82f6'，只会生成 bg-brand、text-brand；bg-brand-500 根本不存在，浏览器里查不到对应 CSS 规则。要支持完整色阶，必须显式定义对象：
extend: {
colors: {
'brand': {
'50': '#dbeafe',
'100': '#bfdbfe',
'500': '#3b82f6',
'700': '#1d4ed8',
'900': '#1e3a8a'
}
}
}- 键名必须是字符串数字（
'50'，不能是50或'light'） - 每个值都得是合法颜色格式：HEX（带
#）、RGB、HSL 或 CSS 变量（如var(--color-brand)） - 不需要填满全部 50–900，但至少得有你实际用到的档位（比如只用
-500和-700，那就只定义这两个键）
为什么写了 bg-brand-500 却没样式？大概率是 JIT 没扫描到
Tailwind 3.0+ 默认启用 JIT 编译，它只生成你在模板中真实写过的 class。配置加了、服务重启了、HTML 里也写了 bg-brand-500，但开发者工具里找不到对应 CSS 规则？先检查这三件事：
-
content配置是否覆盖你的模板路径，比如src/**/*.{js,jsx,ts,tsx,html} - 临时在 HTML 里加一行
<div class="bg-brand-500"></div>测试，确认是不是扫描遗漏 - 开发时可把
content设为空数组（content: []），强制生成全部 class，验证是否为扫描问题
注意：修改 tailwind.config.js 后必须重启开发服务器，Tailwind 不热更新配置。
用于端到端视频本地化流程的轻量编排器，路由至四个专注子技能——/wjs-transcribing-audio、/wjs-translating-subtitles...
立即学习“前端免费学习笔记（深入）”；
自定义颜色怎么用到 placeholder、fill、stroke 上
Tailwind 默认只把 colors 映射到 background-color、color、border-color 和 ring-color 四类工具上。SVG 的 fill、表单 placeholder 文字、甚至 text-opacity 都不会自动继承。要让 brand 支持这些场景，必须手动扩展：
extend: {
colors: { /* ... */ },
placeholderColor: ({ theme }) => ({
...theme('colors'),
}),
fill: ({ theme }) => ({
...theme('colors'),
}),
stroke: ({ theme }) => ({
...theme('colors'),
})
}另外，深色模式下的变体（如 dark:bg-brand-700）需显式声明，Tailwind 不会自动推导。含连字符的键名（如 'dark-blue'）必须加引号，否则解析失败或静默丢弃。
