tailwind css 的 `bg-*` 类未生效，通常是因为 html 中误将 `class` 属性拼写为 `clas`（少了一个 `s`），导致样式类未被识别；而内联样式因直接作用于 dom，不受此拼写影响。
在使用 Tailwind CSS 时，一个看似微小却极其常见的错误，就是将 HTML 的 class 属性名拼错为 clas（漏掉字母 s）。这会导致所有 Tailwind 工具类（如 bg-rose-900、h-full、text-center 等）完全失效——浏览器根本不会解析这些类，自然也不会应用任何对应样式。
以你提供的代码为例：
<!-- ❌ 错误：属性名拼写错误 --> <div clas="h-full bg-rose-900"> <h1 class="text-blue-900 text-center text-4xl">Boards</h1> <p>Test</p> </div>
此处
中的 clas 是无效的 HTML 属性，浏览器会忽略整个 clas 属性及其值，因此 bg-rose-900 和 h-full 均不会生效。
立即学习“前端免费学习笔记（深入）”；
✅ 正确写法应为：
<!-- ✅ 正确：使用标准 class 属性 --> <div class="h-full bg-rose-900"> <h1 class="text-blue-900 text-center text-4xl">Boards</h1> <p>Test</p> </div>
? 小贴士：bg-rose-900 对应的 CSS 是 background-color: #7a0536（即 rgb(122, 5, 54)，注意你引用文档中的 rgb(136 19 55) 实际对应的是 bg-rose-800；rose-900 更深，需确保色值与类名严格匹配）。
此外，请确认以下几点以排除其他潜在问题：
- ✅ 使用了官方 CDN（<script src="https://<a%20style=" color: text-decoration:underline title="cdn" href="https://www.php.cn/zt/19618.html" target="_blank">cdn.tailwindcss.com"></script>），且加载无网络错误（可在浏览器控制台检查 Network 或 Console 标签页）；
- ✅ 页面未启用 CSP 严格策略阻止内联样式或脚本执行；
- ✅ 没有其他 CSS 规则（如 background-color: transparent !important）意外覆盖 Tailwind 样式。
总结：class 拼写错误是最常见也最容易被忽视的原因。建议在开发中启用编辑器的 HTML 校验插件（如 VS Code 的 Auto Close Tag、Prettier 或 HTMLHint），或使用 IDE 的实时语法高亮——clas 通常会被标为未定义属性，从而快速暴露问题。修复拼写后，所有 Tailwind 类将立即生效，无需额外配置。
