必须用theme.extend.colors添加新颜色，否则直接覆盖theme.colors会清空所有默认色导致text-blue-500等失效；自定义色名含连字符需加引号，支持色阶变体需显式声明'50'至'900'字符串键。
tailwind.config.js 里怎么加新颜色才不丢默认色
直接覆盖 theme.colors 会清空所有内置色（text-blue-500、bg-gray-100 全失效），必须用 extend.colors。常见错误是写成：
theme: { colors: { brand: '#3b82f6' } } → 错，colors 被重置
正确写法是：
module.exports = {
theme: {
extend: {
colors: {
'brand-blue': '#3b82f6',
'brand-red': '#ef4444',
}
}
}
}
这样就能安全使用 text-brand-blue 或 bg-brand-red，且不影响原有色类。
立即学习“前端免费学习笔记（深入）”；
如果需要支持 -50 到 -900 变体（比如 bg-brand-blue-500），必须把颜色定义为对象，显式写全色阶：
'brand-blue': { '50': '#eff6ff', '100': '#dbeafe', '500': '#3b82f6', '900': '#1e3a8a' }- 漏掉
extend或写成平级字符串值，Tailwind 就不会生成带后缀的类 - 色阶键名必须是字符串（
'50'，不是50），否则 JIT 模式下可能忽略
font-sans 类突然不生效？大概率是字体配置写错了位置
Tailwind 的 font-sans、font-serif 是硬编码工具类，一旦你写 theme.fontFamily = { sans: [...] }，就等于删掉了 serif 和 mono 的全部规则——类名还在，但 CSS 里没对应声明，浏览器 fallback 到 Times New Roman。
必须走 extend.fontFamily：
module.exports = {
theme: {
extend: {
fontFamily: {
sans: ['Inter', 'ui-sans-serif', 'sans-serif'],
heading: ['"Playfair Display"', 'serif'],
}
}
}
}
之后就能用 font-sans（继承默认逻辑）和 font-heading（全新类）。
注意几个关键点：
- 含空格或中文的字体名（如
"PingFang SC"）必须用双引号包裹，且和@font-face中声明的font-family完全一致（大小写、空格、引号一个都不能差） - Tailwind 不加载字体文件，只输出
font-family声明；@import或@font-face必须手动加在 CSS 入口（比如input.css顶部） - 中文字体栈推荐按系统真实顺序写：
["-apple-system", "BlinkMacSystemFont", "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", "sans-serif"]
为什么自定义颜色能用，但 text-brand-blue-500 报错？
因为 Tailwind 默认只给内置色（blue、gray 等）生成完整的色阶类。你加的 brand-blue 如果只是字符串值，它只生成 text-brand-blue、bg-brand-blue 这种“基础类”，不带数字后缀。
想用 text-brand-blue-500，必须显式定义色阶对象：
'brand-blue': {
'50': '#eff6ff',
'100': '#dbeafe',
'200': '#bfdbfe',
'300': '#93c5fd',
'400': '#60a5fa',
'500': '#3b82f6',
'600': '#2563eb',
'700': '#1d4ed8',
'800': '#1e40af',
'900': '#1e3a8a'
}
这个过程没有自动推导，也不能靠插件省略——少一个键，对应类就不会生成。JIT 模式也不会补全。
容易被忽略的是：色阶命名必须严格匹配 Tailwind 内置逻辑（50–900，不能用 light 或 dark），否则 text-brand-blue-light 这种写法根本不会被识别。
