必须用 theme.extend.colors 扩展颜色，直接赋值 theme.colors 会清空默认色导致 bg-blue-500 等失效；自定义键名含连字符须加引号，灰阶重定义需完整声明 50–900 各档。
tailwind.config.js 里 colors 扩展必须用 extend，不能直接覆盖 theme.colors
直接赋值 theme.colors = { ... } 会清空所有默认色（如 blue、gray），导致 bg-blue-500 等基础类失效。Tailwind v3 的设计是「扩展优先」，所有自定义色必须走 extend.colors。
正确写法：
module.exports = {
theme: {
extend: {
colors: {
brand: {
50: '#f0f9ff',
100: '#e0f2fe',
500: '#0ea5e9',
700: '#0284c7',
},
danger: '#ef4444',
}
}
}
}
这样保留了原有 blue、indigo 等全部默认色，同时新增 brand-500、danger 可直接使用。
自定义色名带连字符（如 dark-blue）需用引号包裹
Tailwind 会把 dark-blue 解析为减法运算，不加引号会导致配置解析失败或颜色丢失。
- ❌ 错误：
dark-blue: '#1e3a8a' - ✅ 正确：
'dark-blue': '#1e3a8a' - ✅ 同样安全：
['dark-blue']: '#1e3a8a'（但引号更直观）
嵌套结构也一样，比如 brand: { 'light-blue': '#bfdbfe' } 中的键必须加引号。
灰阶（gray）被重定义时会覆盖整个调色板，不是只改某几档
如果你写 gray: { 50: '#fafafa', 100: '#f4f4f5' }，那 gray-200 到 gray-900 全部消失——Tailwind 不会自动补全未声明的层级。
解决方式有两种：
- 完整复制默认
gray定义（从官方源码或tailwindcss/defaultTheme导入）再修改部分值 - 只扩展新色，避免重写
gray；真要调整灰阶，用extend.colors.gray并确保列全 10 档（50–900）
推荐后者，省去维护成本。例如：
extend: {
colors: {
gray: {
50: '#fafafa',
100: '#f4f4f5',
200: '#e4e4e7',
// ……一直写到 900
900: '#111827',
}
}
}
开发时热更新不生效？检查 content 是否包含新 class 名使用位置
加了 brand-500 却渲染不出背景色，大概率是 Tailwind 没扫描到该 class 被使用。v3 默认启用 JIT 编译，只生成实际用到的类。
- 确认
content数组包含所有可能写brand-500的文件路径，例如：./src/**/*.{js,ts,jsx,tsx} - 临时测试可在 HTML 中硬写一个
class="bg-brand-500"，看是否生成对应 CSS - 若仍无效，删掉
.cache目录并重启 dev server（有时旧缓存卡住）
另外，确保没在 purge（已废弃）或 content 配置里误写了排除规则。
真正容易被忽略的是嵌套层级的引号和灰阶完整性——这两个点出问题时，往往表现为“颜色突然没了”或“控制台无报错但样式不出现”，排查起来最耗时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
