tailwind css 的 `bg-*` 类未生效，通常是因为 html 中误将 `class` 属性拼写为 `clas`，导致样式类被完全忽略；而内联样式因直接作用于 dom，不受此拼写影响，故能正常显示。
在使用 Tailwind CSS 时，一个看似微小却极其常见的错误是 HTML 标签中属性名拼写错误。正如你在示例代码中所见：
<div clas="h-full bg-rose-900">
这里 clas 是 拼写错误 —— 正确的属性名应为 class。由于浏览器无法识别 clas 属性，所有后续的 Tailwind 类（如 h-full、bg-rose-900）均不会被解析或应用，因此背景色自然不会显示。
而内联样式（style="background-color: rgb(136 19 55);"）之所以“能用”，是因为它不依赖 Tailwind 的类名机制，而是由浏览器原生解析 CSS 声明，与 class 属性是否存在、是否拼对完全无关。
✅ 正确写法如下：
立即学习“前端免费学习笔记（深入）”；
<div class="h-full bg-rose-900"> <h1 class="text-blue-900 text-center text-4xl">Boards</h1> <p>Test</p> </div>
⚠️ 注意事项：
- Tailwind 的 CDN 版本（https://cdn.tailwindcss.com）默认启用 JIT 模式，仅生成实际用到的工具类，但前提是这些类必须通过合法的 class 属性被正确声明；
- 拼错 class 后，Tailwind 根本“看不到”你写的类名，也就不会注入对应 CSS 规则；
- 开发时建议开启浏览器开发者工具 → Elements 面板，检查目标元素是否真的拥有 class 属性及对应值（而非 clas），这是快速定位此类问题的最有效方式；
- 使用 VS Code 等编辑器时，可安装 Auto Close Tag 或 Prettier 插件，配合 HTML 校验，显著降低低级拼写错误发生率。
总结：Tailwind 不生效 ≠ 框架有问题，大概率是基础 HTML 语法疏漏。养成检查 class 拼写、善用 DevTools 元素审查、以及在项目成熟后迁移到本地配置（支持 content 扫描与完整类名预设），是保障 Tailwind 稳定工作的三大实践要点。
