最安全的方式是用 theme.extend.colors 增量扩展颜色；若需彻底替换默认色（如整套 blue），必须使用 theme.colors 全量定义并包含 50–900 色阶；新颜色需在模板中实际使用才能被 JIT 编译生成，且需手动扩展 placeholderColor、stroke、fill 等以支持对应工具类；深色模式下的变体需显式声明，无自动推导。
直接改 theme.extend.colors 就行，别碰 theme.colors —— 后者会清空所有默认色，导致 bg-blue-500 这类类名瞬间失效。
为什么 bg-brand-500 写了却没样式？
JIT 编译只生成你模板里真正用到的 class。配置加了、重启了、也写了 bg-brand-500，但浏览器里查不到对应 CSS 规则？大概率是 JIT 没扫描到它。
- 检查
content配置是否覆盖你的模板路径，比如src/**/*.{js,jsx,ts,tsx,html} - 临时在 HTML 里加一行
测试，确认是否真被编译 - 开发时可把
content设为空数组（content: []）强制生成全部 class，验证是不是扫描问题
怎么让自定义色支持 -50 到 -900 变体？
写成单一值（如 'brand': '#3b82f6'）只会生成 bg-brand、text-brand 这种基础类；bg-brand-500 是无效的——Tailwind 不会自动推导明暗梯度。
Pandas 配置文件报告生成器
下载
使用ydata-profiling（前身为pandas-profiling）生成全面的数据质量报告，包含相关性分析、缺失值模式和基数检测。导出交互式HTML仪表板和JSON摘要。
- 必须显式定义为对象：
'brand': { '50': '#dbeafe', '100': '#bfdbfe', '500': '#3b82f6', '700': '#1d4ed8', '900': '#1e3a8a' } - 键名只能是字符串数字（
'50'），不能是'light'或50（数字类型） - 每个值都得是合法颜色格式：HEX（带
#）、RGB、HSL 或 CSS 变量（如var(--color-brand)）
如何让新颜色生效于 placeholder、stroke、fill 等工具类？
Tailwind 默认只把 colors 映射到 background-color、color、border-color 和 ring-color。SVG 的 fill、表单 placeholder 文字、甚至 text-opacity 都不会自动继承。
- 需手动扩展：
theme.extend.placeholderColor、theme.extend.stroke、theme.extend.fill - 例如：
placeholderColor: { brand: '#3b82f6' }→ 支持placeholder-brand - 深色模式变体（如
dark:placeholder-brand）不自动推导，得自己加dark:theme.extend...或用 CSS 变量配合prefers-color-scheme
最常被忽略的一点：改完 tailwind.config.js 必须重启开发服务器，Tailwind 不会热更新配置；还有，别用连字符或数字开头的键名（如 'my-color' 或 '1primary'），会导致类名生成异常或完全丢失。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
