自定义颜色生产构建失效，根本原因是 content 配置未覆盖实际使用颜色类的文件路径；tailwind 仅扫描 content 显式指定的文件，动态拼接或第三方库中的类名需通过 safelist 或正则显式声明，且配置变更后必须重启开发服务并清除缓存。
自定义颜色在生产构建中失效，几乎肯定是 content 配置没覆盖到你实际使用这些颜色类的文件——Tailwind 不会“猜”你写了什么，它只扫描你明确列在 content 数组里的路径下的原始文本。
为什么开发时看着正常，一打包就没了
Tailwind 开发服务器（如 Vite/Next.js）通常启用 JIT 模式，能动态生成少量未声明的类；但生产构建强制走 PurgeCSS 流程，严格依赖 content 扫描结果。你写的 bg-my-blue 如果没出现在任何被扫描的文件里，就会被当成“死代码”直接删掉。
- 常见场景：你在
src/utils/theme.ts里定义了const COLOR_MAP = { 'my-blue': 'bg-my-blue' }，但这个文件没加进content—— Tailwind 看不到字符串"bg-my-blue"，自然不生成对应 CSS - 更隐蔽的情况：你用
className={`bg-${theme}-500`}动态拼接，源码里根本没出现过bg-my-blue这个字面量，PurgeCSS 直接跳过 - 第三方组件库（比如 DaisyUI）内部用了
bg-my-blue，但它的源码路径没列在content里，同样被清空
检查 tailwind.config.js 的 content 是否漏路径
content 必须显式包含所有含类名的文件类型和位置，不能靠“大概齐”。以下配置极易出错：
- 写了
"./src/**/*.{js,ts}"却忘了tsx或jsx—— React 组件里写的bg-my-blue全军覆没 - Next.js App Router 项目漏了
"./app/**/*.{js,ts,jsx,tsx}"，layout.tsx里的自定义色就消失 - 静态 HTML 文件（如
public/index.html）没加进content，里面硬写的class="bg-my-blue"也会被删 - 路径含空格或中文时，
--content参数没用双引号包裹，导致 CLI 构建时该路径完全失效
动态拼接的 class 必须进 safelist
JS 中拼出来的类名（如 bg-${color}-500）不会出现在源码文本里，PurgeCSS 根本捕获不到。解决方式不是改逻辑，而是告诉 Tailwind “这些字符串我确实要用”：
- 简单固定值：在
tailwind.config.js里加safelist: ['bg-my-blue', 'text-my-red'] - 带变体：用正则匹配响应式前缀，例如
{ pattern: /^(md|hover):bg-my-(blue|red)$/ } - 避免
.*结尾：像/bg-.*/会误抓bg-clip这类原生属性，引入冗余样式
别忽略 config 修改后的缓存问题
改完 tailwind.config.js 后，构建工具往往不自动重读配置：
- Vite 项目：必须
Ctrl+C停掉服务，再重新运行npx vite—— 热更新不感知 config 变更 - Next.js：改完 config 后需重启
next dev，否则bg-my-green永远找不到 - CLI 构建：如果用
npx tailwindcss -i ...，要手动中断并重跑；残留缓存可删掉项目根目录下的.tailwindcache文件
真正容易被忽略的是：你确认了 extend.colors 写对了、content 路径也全了，但构建命令压根没把 content 数组传进去——v3+ 的 CLI 默认不读 config 里的 content，必须每个路径都作为独立 --content 参数显式传入。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
