必须用theme.extend.colors增量添加并显式定义完整色阶（如'500': '#8b5cf6'），否则bg-brand-accent-500等类不生成；直接赋值theme.colors会清空所有内置色，导致bg-blue-500、text-gray-700失效。
直接在 theme.colors 下赋值会清空所有内置色（bg-blue-500、text-gray-700 全失效），必须用 theme.extend.colors 增量添加，且每个自定义色必须显式声明完整色阶（如 '500': '#8b5cf6'），否则 bg-brand-accent-500 类根本不会生成。
为什么 bg-brand-primary-500 不生效？
常见错误是只写单值：brand-primary: '#3b82f6'。Tailwind 不会自动推导明暗梯度——它只生成 bg-brand-primary，不支持带数字后缀的类名。
- 必须写成对象形式：
brand-primary: { '50': '#f9fafb', '100': '#f1f5f9', '500': '#3b82f6', '900': '#1e293b' } - 键必须是字符串（
'500'，不是500），值必须带# - JIT 模式下，若 HTML 中没出现过该 class，CSS 规则就不会输出；临时加个
<div class="bg-brand-primary-500"></div>测试 - 检查
content配置是否覆盖源文件路径，例如['./src/**/*.{js,jsx,ts,tsx,html}']
如何让 fill、stroke、placeholderColor 也支持品牌色？
Tailwind 默认只把 colors 映射到 background-color、color、border-color 和 ring-color 四类属性。SVG 的 fill、输入框 placeholder、图标描边 stroke 不会自动继承。
- 需在
theme.extend下分别补全：fill、stroke、placeholderColor - 推荐用 CSS 变量而非硬编码 HEX，方便后续深色模式切换：
fill: { 'brand-primary': 'var(--color-brand-primary)' } - 同时在
:root或html上设置对应变量：--color-brand-primary: #3b82f6;
改完 tailwind.config.js 为什么样式没更新？
Dev server 不会热重载配置变更，哪怕你只改了一个逗号。
- 必须手动重启开发服务：
npm run dev或pnpm dev - 若使用 Vite +
@tailwindcss/vite，确认插件已启用且无版本冲突 - 清除构建缓存（
.tailwind-cache目录）可避免旧规则残留
最易被忽略的点：色阶命名必须严格匹配 JIT 扫描逻辑——'50'、'100'、'500' 这些 key 是 Tailwind 内部约定，不能用 light、main、dark 替代，否则所有带数字后缀的工具类都失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
