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