tailwind 样式未生效通常源于 html 属性拼写错误，最典型的是将 `class` 误写为 `clas`，导致浏览器完全忽略所有 tailwind 工具类（如 `bg-rose-900`），而内联样式因语法独立仍可正常渲染。

在你提供的代码中，问题非常明确：

clas 并非合法的 html 属性，浏览器会直接忽略该标签上的所有 Tailwind 类名（包括 h-full 和 bg-rose-900），因此背景色和高度均不会应用。而内联样式 style=”background-color: rgb(136 19 55);” 是独立于 class 属性的 css 声明，不受拼写影响，故能正常显示。

✅ 正确写法应为：

   
Boards
   
Test
立即学习“前端免费学习笔记（深入）”；
 

此外，还需注意以下几点以避免类似问题：

• 检查开发者工具：在 chrome 或 firefox 中右键 → “检查”，查看对应元素的 Computed 标签页。若 background-color 未出现，或 class 属性根本未被解析（即 dom 中看不到 class=”…”），大概率是 class 拼写错误；
• 区分大小写与连字符：Tailwind 类名严格区分大小写（如 bg-Rose-900 无效），且必须使用小写+连字符（bg-rose-900）；
• 确认 Tailwind cdn 已正确加载：确保 在 中且无网络拦截；可通过控制台输入 tailwind.config 验证是否初始化成功；
• 避免类名冲突或覆盖：虽然本例主因是拼写错误，但后续开发中也需留意 CSS 优先级——内联样式（style）优先级高于 class，因此即使 bg-rose-900 生效，也可能被其他更高优先级规则覆盖。

总结：Tailwind 是基于真实 class 属性运行的工具类系统，任何对 class 属性名的拼写偏差（如 clas、className、classes）都会导致全部工具类失效。养成编写 HTML 时严格校验属性名的习惯，是高效使用 Tailwind 的第一道防线。