应使用 theme.extend.colors 增量添加颜色，如 'brand-blue': { '50': '#eff6ff', '500': '#3b82f6' }，并确保 content 配置覆盖模板路径且重启开发服务器。
直接改 theme.colors 会清空所有默认色，bg-blue-500、text-gray-700 全部失效——这不是配置没生效，是整个内置色盘被扔掉了。
用 theme.extend.colors 增量添加新颜色最安全
这是唯一推荐的起点。Tailwind 会把你的配置和默认色盘合并，旧类照常工作，新类也能用。
- ✅ 正确写法：
extend: { colors: { 'brand-blue': '#3b82f6' } }，之后可用bg-brand-blue或text-brand-blue - ❌ 错误写法：
colors: { 'brand-blue': '#3b82f6' }（顶层直接写colors，清空默认） - ⚠️ 无效写法：
extend: { colors: { blue: '#1a56db' } }（同名 key 不覆盖，默认blue仍优先） - 自定义键名含连字符必须加引号，比如
'dark-blue'；驼峰如brandBlue可不加，但可读性差
要支持 -50 到 -900 色阶，必须声明为对象
'brand-blue': '#3b82f6' 只生成基础类（bg-brand-blue），bg-brand-blue-500 会找不到规则——Tailwind 不自动推导明暗梯度。
- 必须显式写成：
'brand-blue': { '50': '#eff6ff', '100': '#dbeafe', '500': '#3b82f6', '900': '#1e3a8a' } - 键必须是字符串（
'50'，不是50），值必须带#（如'#3b82f6'） - 不用填满全部 50–900，只声明你实际需要的档位即可
- RGB/HSL/CSS 变量也支持，例如
'500': 'rgb(59, 130, 246)'或'500': 'var(--primary)'，但变量需确保运行时已定义
新颜色在模板里没生效？大概率是 JIT 编译没扫描到
Tailwind 3.0+ 默认启用 JIT 模式，它只生成你在 HTML/JSX/TSX 文件中**真实写过**的 class。配置写了 ≠ CSS 生成了。
- 检查
content配置是否覆盖你的模板路径，例如content: ['./src/**/*.{html,js,jsx,ts,tsx}'] - 临时加一行测试：
<div class="bg-brand-blue-500"></div>，再刷新页面 - 开发时可短时间关闭 purging：把
content设为空数组[]，或加!important排查是否为编译问题 - 改完
tailwind.config.js必须重启 dev server（npm run dev），热更新不重载配置
让自定义色支持 placeholder、stroke、fill 等工具类
默认只对 background-color、color、border-color 等少数几类应用颜色。SVG 的 fill、表单 placeholder 都不会自动继承。
- 需手动扩展：
extend: { colors: { 'brand-blue': { ... } }, placeholderColor: { brand: 'var(--brand-blue-500)' }, stroke: { brand: 'var(--brand-blue-500)' }, fill: { brand: 'var(--brand-blue-500)' } } - 深色模式变体（如
dark:fill-brand）不会自动推导，必须显式声明对应 dark 模式下的 color key - 如果用 CSS 变量做主题切换，建议把
brand-blue定义为变量，再在colors中引用，避免重复维护
最容易被忽略的是色阶声明方式和 JIT 扫描机制——哪怕配置全对，没在模板里写过一次 bg-brand-blue-500，它就真的不会出现在最终 CSS 里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
