tailwind 样式未生效通常源于 html 属性拼写错误，最典型的是将 `class` 误写为 `clas`，导致浏览器完全忽略所有 tailwind 工具类（如 `bg-rose-900`），而内联样式因语法独立仍可正常渲染。
在你提供的代码中，问题非常明确：
<!-- ❌ 错误写法：属性名拼写错误 --> <div clas="h-full bg-rose-900">
clas 并非合法的 HTML 属性，浏览器会直接忽略该标签上的所有 Tailwind 类名（包括 h-full 和 bg-rose-900），因此背景色和高度均不会应用。而内联样式 style="background-color: rgb(136 19 55);" 是独立于 class 属性的 CSS 声明，不受拼写影响，故能正常显示。
✅ 正确写法应为：
<!-- ✅ 正确写法：使用标准 class 属性 --> <div class="h-full bg-rose-900"> <h1 class="text-blue-900 text-center text-4xl">Boards</h1> <p>Test</p> </div>
此外，还需注意以下几点以避免类似问题：
立即学习“前端免费学习笔记（深入）”；
- 检查开发者工具：在 Chrome 或 Firefox 中右键 → “检查”，查看对应元素的 Computed 标签页。若 background-color 未出现，或 class 属性根本未被解析（即 DOM 中看不到 class="..."），大概率是 class 拼写错误；
- 区分大小写与连字符：Tailwind 类名严格区分大小写（如 bg-Rose-900 无效），且必须使用小写+连字符（bg-rose-900）；
- 确认 Tailwind CDN 已正确加载：确保 <script src="https://cdn.tailwindcss.com"></script> 在 <head> 中且无网络拦截；可通过控制台输入 tailwind.config 验证是否初始化成功；
- 避免类名冲突或覆盖：虽然本例主因是拼写错误，但后续开发中也需留意 CSS 优先级——内联样式（style）优先级高于 class，因此即使 bg-rose-900 生效，也可能被其他更高优先级规则覆盖。
总结：Tailwind 是基于真实 class 属性运行的工具类系统，任何对 class 属性名的拼写偏差（如 clas、className、classes）都会导致全部工具类失效。养成编写 HTML 时严格校验属性名的习惯，是高效使用 Tailwind 的第一道防线。
