必须用 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+ 的设计逻辑就是「扩展优先」，覆盖是高危操作。

Pandas 配置文件报告生成器

使用ydata-profiling（前身为pandas-profiling）生成全面的数据质量报告，包含相关性分析、缺失值模式和基数检测。导出交互式HTML仪表板和JSON摘要。

下载

• ✅ 正确姿势：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 等完全不会继承。

• 必须手动扩展：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 就会静默跳过整条规则。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！