必须用 theme.extend.colors 定义色阶对象（如 'brand': { '500': '#3b82f6' }），否则 bg-brand-500 不生成；直接赋值 theme.colors 会清空默认色，JIT 模式下还需在模板中真实使用该类并重启服务。
直接在 tailwind.config.js 里用 theme.extend.colors 写色阶对象，否则 bg-brand-500 这类类名根本不会生成——不是配置没生效，是 Tailwind 根本没编译出对应 CSS 规则。
为什么写了自定义颜色却找不到 bg-brand-500 的 CSS 规则
Tailwind 不会为单值颜色（如 'brand': '#3b82f6'）自动推导深浅梯度。它只对内置色名（blue、gray 等）做预设映射。你加的 brand 是一个“原子值”，构建时仅产出 bg-brand，不生成任何带数字后缀的类。
- 必须显式定义为对象：
'brand': { '50': '#eff6ff', '500': '#3b82f6', '900': '#1e3a8a' } - 键名必须是字符串（
'500'，不能是500或'medium'） - 值必须是合法颜色格式：HEX（带
#）、RGB、HSL 或 CSS 变量（如var(--brand-500)） - 不需要填满全部 50–900，但至少得有你在模板中真实用到的档位
如何避免清空所有默认色（比如 bg-blue-500 突然失效）
直接写 theme.colors = { ... } 会彻底替换整个色盘，连 white 和 black 都消失。Tailwind v3+ 的设计逻辑就是「扩展优先」，覆盖是高危操作。
- ✅ 正确姿势：
theme: { extend: { colors: { 'brand': { '500': '#3b82f6' } } } } - ❌ 错误姿势：
theme: { colors: { 'brand': '#3b82f6' } }—— 整个内置色盘被丢弃 - ⚠️ 无效姿势：
extend: { colors: { blue: '#1a56db' } }—— 同名 key 不覆盖，默认blue仍优先 - 含连字符的键名必须加引号：
'dark-blue'；驼峰如brandBlue可不加，但可读性差
为什么 placeholderColor、fill、stroke 用不了自定义色
Tailwind 默认只把 colors 映射到 background-color、color、border-color 和 ring-color 四类工具上。SVG 的 fill、表单 placeholder、stroke 等完全不会继承。
Pandas 配置文件报告生成器
下载
使用ydata-profiling（前身为pandas-profiling）生成全面的数据质量报告，包含相关性分析、缺失值模式和基数检测。导出交互式HTML仪表板和JSON摘要。
立即学习“前端免费学习笔记（深入）”；
- 必须手动扩展：
placeholderColor、fill、stroke等字段 - 推荐用 CSS 变量而非硬编码 HEX：
placeholderColor: { brand: 'var(--color-brand-500)' } - 确保这些扩展项的 key 名和
colors中定义的一致（如都叫brand） - 深色模式下无自动变体，若需适配，得手动声明两套值或靠 CSS 变量 +
@media (prefers-color-scheme: dark)
JIT 模式下 class 不生效的三个关键排查点
Tailwind 3.0+ 默认启用 JIT 编译，它只生成你在 HTML/JSX/TSX 文件中**真实写过**的 class。配置写了 ≠ CSS 生成了。
- 检查
content配置是否覆盖你的源文件路径，例如：content: ['./src/**/*.{js,jsx,ts,tsx,html}'] - 临时在模板中加一行测试：
<div class="bg-brand-500"></div>，再刷新页面 - 改完
tailwind.config.js必须重启开发服务器（npm run dev），热更新不重载配置 - 开发时可临时设
content: []强制生成全部 class，验证是否为扫描遗漏
最常被忽略的是：颜色名和工具类扩展字段（fill、stroke）必须严格一致，且所有色阶键必须是字符串——哪怕只漏掉一个引号或写成数字，JIT 就会静默跳过整条规则。
