自定义颜色需定义为色阶对象而非单值十六进制，否则不支持-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 下一致

色阶对象的结构、键名类型、变量作用域范围，这三点最容易被跳过，但一旦出错，调试成本远高于提前写对。

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