tailwind v3+ 中 theme.colors 是顶层替换入口，直接赋值会清空所有内置色；必须用 theme.extend.colors 增量添加，且自定义色需显式定义色阶（如 '500': '#8b5cf6'），否则 bg-brand-accent-500 等类不生效。
直接写 theme.colors 会清空所有默认色，包括 bg-blue-500 和 text-gray-700
Tailwind v3+ 的设计逻辑是「扩展优先」，theme.colors 是顶层替换入口。一旦你写成 colors: { primary: '#3b82f6' }，整个内置色盘（blue、gray、red 等）就没了，所有依赖它们的工具类立刻失效——这不是配置没生效，是颜色系统被重置了。
必须用 theme.extend.colors 增量添加，这是唯一安全路径。它和默认色盘合并后参与构建，bg-blue-500 和 bg-primary-500 都能共存。
- ✅ 正确：
extend: { colors: { primary: '#3b82f6', 'brand-accent': '#8b5cf6' } } - ❌ 错误：
colors: { primary: '#3b82f6' }（清空全部内置色） - ⚠️ 无效：
extend: { colors: { blue: '#1a56db' } }（同名 key 不覆盖，默认blue仍优先）
brand-accent-500 类不生效？大概率是 JIT 没扫描到或色阶没定义
Tailwind 3.0+ 默认启用 JIT 编译，它只生成你在 HTML/JSX/TSX 中真实写过的 class。哪怕配置完全正确，只要模板里没出现过 bg-brand-accent-500，CSS 规则就不会输出。
另外，'brand-accent': '#8b5cf6' 这种单值写法只生成 bg-brand-accent，不支持 -500 后缀——Tailwind 不为自定义色自动推导明暗梯度。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 必须显式定义为对象：
'brand-accent': { '50': '#f3f4f6', '500': '#8b5cf6', '900': '#4c1d1c' } - 键必须是字符串（
'500'，不是500），值必须带# - 临时加测试元素：
<div class="bg-brand-accent-500"></div>，再刷新页面 - 检查
content配置是否覆盖源文件路径，例如['./src/**/*.{js,jsx,ts,tsx,html}'] - 改完
tailwind.config.js必须重启 dev server，热更新不重载配置
让 fill、stroke、placeholderColor 也支持自定义色需手动桥接
Tailwind 默认只把 colors 映射到 background-color、color、border-color 和 ring-color 四类属性。SVG 的 fill、输入框的 placeholder、图标描边 stroke 不会自动继承你新增的颜色。
必须在 theme.extend 下分别补全对应配置项，并推荐使用 CSS 变量而非硬编码 HEX，方便后续深色模式切换：
fill: { 'brand-accent': 'var(--color-brand-accent)' }stroke: { 'brand-accent': 'var(--color-brand-accent)' }placeholderColor: { 'brand-accent': 'var(--color-brand-accent)' }- 同时在 CSS 中定义变量：
:root { --color-brand-accent: #8b5cf6; }
多品牌主题共存时，命名冲突和灰阶覆盖容易被忽略
多个品牌色并存时，键名若含连字符（如 dark-blue、light-green）必须加引号，否则 JS 解析失败；而灰阶（gray）一旦在 extend.colors 中重定义，未声明的档位（比如只写了 'gray': { '50': '#fafafa' }）会丢失，gray-200 到 gray-900 全部不可用。
- ✅ 安全做法：用语义化前缀区分品牌，如
'brand-a-primary'、'brand-b-primary' - ✅ 灰阶调整建议单独维护，避免混入品牌色配置；真要覆盖，确保填满
'50'到'900'所有档位 - ⚠️ 多项目复用配置时，不要把
tailwind.config.js当作运行时模块——它只在构建时读取，前端 JS 无法直接 import
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
