bg-main-bg不生效的最常见原因是配置错误或JIT未扫描到使用位置：颜色未在theme.extend.colors中正确定义为对象、content路径未覆盖当前文件，或修改配置后未重启开发服务器。
bg-main-bg 类就行，但前提是它已在 tailwind.config.js 中正确定义并被 JIT 编译识别——否则类名无效，背景不会生效。
为什么 bg-main-bg 不生效？
最常见原因是配置写错或 JIT 没扫描到使用位置：
• 把颜色直接塞进 theme.colors 而不是 theme.extend.colors，导致所有默认色（如 bg-blue-500）集体消失；
• 在 theme.extend.colors 里只写了 'main-bg': '#f3f4f6'，没展开成对象，结果只有 bg-main-bg 生效，bg-main-bg-100 这类变体根本不存在；
• content 配置没覆盖当前页面文件路径，JIT 编译压根没读到你写的 bg-main-bg，自然不生成对应 CSS 规则。
如何正确定义 main-bg 并支持常用色阶
必须在 tailwind.config.js 的 theme.extend.colors 下定义为对象，至少包含你实际要用的档位：
module.exports = {
theme: {
extend: {
colors: {
'main-bg': {
'50': '#FAFAFA',
'100': '#F5F5F5',
'200': '#EEEEEE',
'500': '#F3F4F6', // 常用主背景
'900': '#1F2937'
}
}
}
}
}
- 键名必须是字符串（
'50'，不能是50或light） - 每个值必须是合法颜色格式：HEX、RGB、HSL 或 CSS 变量（如
var(--bg-main)） - 不需要填满全部 50–900，但 HTML 中用了
bg-main-bg-500，这里就必须有'500'键
如何确保页面级背景生效且不污染全局
不要给 <body> 直接加类——Tailwind 默认不处理 body 的样式重置，且可能被其他 CSS 覆盖。更可靠的做法是：
- 在页面最外层容器（如
<div class="min-h-screen">）上加bg-main-bg-500 - 若需深色模式适配，得手动定义两套值，例如：
'main-bg': { '50': '#FAFAFA', 'dark': '#111827' }，再配合dark:bg-main-bg-dark - 避免用
bg-[#f3f4f6]写死 HEX——它绕过主题系统，无法响应暗色模式，也不便于后期统一调整
调试时最容易忽略的一点
改完 tailwind.config.js 必须重启开发服务器——Tailwind 不热更新配置；即使你确认 HTML 里写了 bg-main-bg-500，如果开发者工具里查不到对应 CSS 规则，八成是服务没重启，或者 content 路径漏掉了当前文件后缀（比如忘了加 .tsx）。
立即学习“前端免费学习笔记（深入）”；
