自定义颜色需定义为色阶对象而非单值十六进制，否则不支持-500等后缀；键名必须为字符串数字（如'500'），覆盖theme.colors.gray会全局影响所有gray相关类；暗色模式需手动配置CSS变量或两套值。
直接在 tailwind.config.js 的 theme.extend.colors 下添加对象即可支持完整色阶，不是加个 HEX 值就完事——否则 bg-brand-red-500 会失效。
自定义颜色为什么用不了 -500、-200 这类后缀？
Tailwind 默认只给内置色（如 blue、gray）生成完整的色阶类；你加的 'brand-red': '#e53e3e' 是“单值”，构建时只产出 bg-brand-red，不生成任何带数字后缀的类。
- 错误写法：
colors: { 'brand-red': '#e53e3e' }→ 只有bg-brand-red - 正确写法：
'brand-red': { '50': '#fff5f5', '100': '#fed7d7', '500': '#e53e3e', '900': '#742a2a' }→ 才能用bg-brand-red-500 - 键名必须是字符串（
'50'），不能是数字50，否则构建报错 - 不用填满全部档位，按项目实际需要选几个常用档位即可，避免 CSS 体积膨胀
覆盖 theme.colors.gray 会出什么问题？
直接改 theme.colors.gray 是全局覆盖行为，所有依赖 gray- 的类都会变：不只是 text-gray-700，还有 border-gray-200、ring-gray-400、placeholder-gray-400、divide-gray-300 等复合工具类全受影响。
Pandas 配置文件报告生成器
下载
使用ydata-profiling（前身为pandas-profiling）生成全面的数据质量报告，包含相关性分析、缺失值模式和基数检测。导出交互式HTML仪表板和JSON摘要。
- 团队协作中容易引发视觉回归问题，尤其旧组件没做适配时
- DevTools 里搜
gray-能快速定位潜在变动点 - 更稳妥的做法是新增命名（如
ui-gray），保留原gray不动，新组件逐步迁移
dark: 前缀下自定义色怎么自动切换？
Tailwind 不会为自定义色自动推导暗色变体。写 dark:bg-brand-red，它不会变成深红——除非你手动定义两套值或用 CSS 变量 + @dark 规则。
立即学习“前端免费学习笔记（深入）”；
- 最简可控方案：启用
darkMode: 'class'，然后在colors中引用变量：'brand-red': 'var(--brand-red)'，再在 CSS 中用@layer base或外部样式表定义:root和.dark下的--brand-red - 别依赖
color-mix()自动生成——它需运行时计算，且 Tailwind JIT 不解析该函数，无法生成对应工具类 - 如果用 Nuxt，建议把变量注入
:root和.dark选择器，确保 SSR 和 CSR 下一致
色阶对象的结构、键名类型、变量作用域范围，这三点最容易被跳过，但一旦出错，调试成本远高于提前写对。
