自定义颜色不生效主要是 tailwind.config.js 配置错误、JIT 扫描未覆盖使用位置或类名拼写/格式不符：直接重写 theme.colors 会清空默认色，应通过 extend.colors 扩展；类名须符合 bg-primary-500 格式；content 路径需正确覆盖文件并重启开发服务器；动态插值 class="bg-{color}-500" 永远无效。
自定义颜色不生效，基本是 tailwind.config.js 配置写错、JIT 扫描没覆盖到使用位置，或类名拼写/格式不符合 Tailwind 规则——不是浏览器问题，也不是 CSS 优先级冲突。
tailwind.config.js 中 colors 配置方式错误
Tailwind 对 theme.colors 和 theme.extend.colors 的处理逻辑完全不同：
- 直接重写
theme.colors（如colors: { blue: '#1e40af' }）会**清空所有默认色**，bg-blue-500等立刻失效 - 正确做法是只扩展：
extend: { colors: { primary: '#3b82f6' } }，这样bg-primary可用，且默认色保留 - 如果想让
bg-primary-500这类变体也生效，必须把primary定义为对象而非字符串：primary: { 50: '#f0f9ff', 100: '#e0f2fe', ..., 900: '#1e40af' }
类名写法不符合 Tailwind 命名规范
哪怕配置完全正确，类名写错一个字符也会白搭：
-
bg-primary500❌（缺连字符）→ 正确是bg-primary-500 -
bg-[primary]-500❌（任意值语法不能套变量名）→bg-primary-500是预设类，bg-[#3b82f6]才是任意值 -
text-primary和bg-primary是两个独立类，别混用前缀 - 确保 HTML 属性是
class，不是clas或className（在纯 HTML 中className无效）
content 配置未扫描到当前文件
JIT 模式下，Tailwind 只生成它「看到」的类。如果你在某个新页面或组件里写了 bg-primary，但 content 路径没包含该文件，这个类根本不会进最终 CSS：
- 检查
tailwind.config.js中content数组是否覆盖你的文件路径，比如 Svelte 组件是./src/**/*.svelte，Vue 是./src/**/*.{vue,js} - 路径字符串必须加引号，
./**/*.html✅，./**/*.html（没引号）在某些环境下会被 shell 解析失败 - 改完
content或tailwind.config.js后，必须重启开发服务器（HMR 不会重读配置）
动态插值类名（如 bg-{color}-500）永远不生效
Tailwind 在构建时解析类名，而 {color} 是运行时 JS 变量，编译器看到的只是字面量 bg-{color}-500，不会展开：
- 在 Svelte/React/Vue 中写
class="bg-{color}-500"或className={`bg-${color}-500`}→ 无效 - 可行替代方案只有两个：
bg-[#3b82f6]（任意值 + 字符串插值，仅限开发或 CDN 环境）或直接操作element.style.backgroundColor = colorValue（生产环境唯一可靠方式） - 别指望
classList.add(`bg-${color}-500`)能工作——除非你提前把所有可能的组合都硬编码进源码里，让 JIT 扫描到
最常被忽略的一点：改了 tailwind.config.js 却没重启 dev server，或者 content 路径漏掉了一个星号，导致 JIT 根本没读到你刚写的 bg-primary —— 这时候打开 DevTools 查元素，会发现 class 存在，但对应 CSS 规则压根没生成。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
