Tailwind自定义颜色未生效的主因是content路径遗漏或类名不符合生成规则：需确保配置中包含所有相关文件路径（如.tsx/.jsx）、类名带数字后缀（如bg-my-blue-500）、动态类名加入safelist、修改配置后重启开发服务并硬刷新。
自定义颜色没生效，基本就是 content 没扫到你写类的地方，或者类名根本不符合 Tailwind 的生成规则——不是配置写错了，而是它压根没机会生成对应 CSS。
tailwind.config.js 的 content 路径漏了文件
Tailwind 不会“猜”你用了哪些类，只扫描 content 数组里明确列出的路径。漏一个后缀、少一个目录，bg-my-blue-500 就直接消失。
- React/Vite 项目必须包含
.tsx和.jsx：["./src/**/*.{js,ts,jsx,tsx}"]，只写js,ts会跳过所有组件 - Next.js App Router 项目要加
./app/**/*.{js,ts,jsx,tsx}，否则layout.tsx里的自定义色全白配 -
public/index.html里写了class="bg-my-blue-500"？那它也得进content，不然 JIT 编译器根本看不见 - 路径含空格或中文时，CLI 构建要用双引号包裹：
--content "./src/**/*.{js,ts}"，否则该段路径失效
类名写法不符合 Tailwind 的生成逻辑
哪怕你在 theme.extend.colors 里正确定义了 'my-blue': '#1e40af'，bg-my-blue 依然不会生效——Tailwind 不生成无深度值的颜色类。
- 必须带数字后缀：
bg-my-blue-500、text-my-blue-600才能触发生成 - 颜色名会被标准化：驼峰（
myBlue）转为短横线（my-blue），但my.blue→myblue，500blue→500blue（数字开头不推荐） - 只配
'my-blue': '#1e40af'，不会自动推导my-blue-100～my-blue-900；如需多档变体，得手动展开成对象
动态拼接类名没进 safelist
JS 中写 className={`bg-${theme}-500`}，源码里根本没有 bg-my-blue-500 这个字面量，PurgeCSS 直接跳过——开发时看着正常，生产构建就没了。
- 必须在
tailwind.config.js中显式声明：safelist: ['bg-my-blue-500', 'bg-my-red-600'] - 或用正则匹配：
safelist: [/bg-[a-z]+-500/, /text-[a-z]+-600/]（注意斜杠不能少） - 第三方库（如 DaisyUI）内部用了你的自定义色？它的源码路径也得加进
content，否则照样被清掉
改完配置没重启开发服务
Tailwind v3+ 的 dev server 不监听 tailwind.config.js 变更，缓存不清理，改了等于白改。
- 关掉当前
npm run dev或pnpm dev - 重新运行启动命令
- 浏览器硬刷新（
Ctrl+Shift+R/Cmd+Shift+R），避免加载旧 CSS 缓存 - 如果用了
@apply，尤其在 Vue 的里，它根本绕不过 postcss-loader——换全局或直接写工具类
最隐蔽的坑是：你以为类名写对了、配置也改了，但 content 漏了一个 .vue 后缀，或 safelist 正则少写了结尾斜杠，整个构建流程就静默跳过——它不会报错，只会安静地删掉你想要的样式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
