按钮颜色不生效，主要是Tailwind颜色类名书写错误或项目配置问题；需检查类名格式（如bg-blue-500）、config.js中colors配置、CSS引入及构建流程是否正常。
按钮颜色不生效，大概率是 Tailwind 的颜色类名写错了，或者项目没正确配置自定义颜色变量。
确认 class 名称是否拼写正确
Tailwind 的颜色类名有固定格式：前缀 + 颜色名 + 深度值，比如 bg-blue-500、text-red-600、hover:bg-green-700。常见错误包括：
- 漏掉数字（如写成
bg-blue→ 错误，必须是bg-blue-500） - 数字超出范围（Tailwind 默认只支持 50–900，
bg-blue-1000无效） - 颜色名大小写或连字符错误（如
bg-blue500或bg-blue_500） - 混淆背景和文字类（
bg-是背景色，text-是文字色）
检查 tailwind.config.js 是否覆盖了 colors 配置
如果你在 tailwind.config.js 中自定义了 theme.extend.colors 或直接重写了 theme.colors，但没包含你用的颜色（比如删掉了 blue 却还在用 bg-blue-500），就会失效。
确保配置中保留了所需颜色，或按需扩展：
立即学习“前端免费学习笔记（深入）”；
module.exports = {
theme: {
extend: {
colors: {
primary: '#3b82f6', // 自定义后可用 bg-primary
}
}
}
}
之后就能用 bg-primary，但 bg-blue-500 仍有效——除非你完全替换了 colors。
确认 CSS 文件是否已正确引入并处理
颜色类没生效，也可能是构建流程问题：
- CSS 文件未通过
@tailwind base / components / utilities注入 - PostCSS 没运行，或配置缺失
tailwindcss插件 - 开发服务器没重启，旧 CSS 缓存未更新（可清缓存或重启 dev server）
- 使用了 PurgeCSS / content pruning，但 HTML 或 JS 中没实际出现该 class，被自动移除了（检查
content配置是否覆盖了你的模板路径）
快速验证方式
临时加一个最基础的 class 测试是否整体生效：
