必须用 theme.extend.colors 扩展颜色，直接赋值 theme.colors 会清空默认色；自定义色名含连字符需加单引号；支持 -500 后缀须定义完整色阶对象；jit 模式下需确保类在模板中字面量出现或加入 safelist；修改配置后须重启开发服务器。
必须用 theme.extend.colors，别碰 theme.colors
直接写 theme.colors = { brand: '#3b82f6' } 会清空所有默认色——bg-blue-500、text-gray-700、ring-indigo-400 全部失效。Tailwind 不是“覆盖 blue”，而是扔掉整个内置色盘。你新加的 brand 和默认色不在一个层级，互不兼容。真正生效且安全的写法只有一种：theme.extend.colors，它和内置色合并，bg-brand-500 和 bg-blue-500 能共存。
brand-red 这种带连字符的名字必须加单引号
配置里写 brand-red: '#e53e3e' 会被 JS 解析成减法运算（brand - red），导致语法错误或静默丢弃。哪怕嵌套在对象里也一样，比如 navy: { 'light-blue': '#bfdbfe' } 中的 light-blue 也得引起来。正确写法是：'brand-red': '#e53e3e' 或 ['brand-red']: '#e53e3e'。驼峰名如 brandRed 可不加引号，但可读性差，不推荐。
要支持 -500 后缀，必须定义为色阶对象，键名是字符串
只写 'brand-red': '#e53e3e'，Tailwind 只生成 bg-brand-red 这一个类；bg-brand-red-500 在编译时就报错“class not found”。因为 Tailwind 不为自定义色自动推导明暗梯度。必须手动定义完整色阶对象，且键必须是字符串：'50'、'100'、'500'，不能是数字 50。值支持 HEX（带#）、RGB 字符串、或已声明的 CSS 变量：var(--color-primary)。常用档位选 3–5 个即可，不用填满 50–900。
配置写了，但 class 不生效？检查 JIT 扫描路径和 safelist
JIT 模式下，Tailwind 只打包模板中「字面量出现」的类名。你配了 'brand-red'，但没在任何 .tsx、.html 或 .mdx 文件里写过 bg-brand-red-500，这个类根本不会进最终 CSS。临时加一行测试：<div class="bg-brand-red-500"></div>，并确认该文件路径已被 content 配置覆盖（如 Next.js 要同时包含 app/**/*.{js,jsx,ts,tsx} 和 pages/**/*.{js,jsx,ts,tsx}）。若用动态拼接（如 className={`bg-${color}-500`}），必须在 safelist 里写精确正则：/^bg-(brand-red|navy)-[0-9]+$/，避免宽泛匹配拖垮体积。
最容易被忽略的是：改完 tailwind.config.js 必须重启开发服务器，否则新配置不会加载；还有，placeholder、stroke、fill 这些属性默认不继承自定义色，要额外配 theme.extend.placeholderColor、theme.extend.stroke 等。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
