tailwind css 的 `bg-*` 类未生效，通常是因为 html 中误将 `class` 属性拼写为 `clas`，导致样式类被完全忽略；而内联样式因直接作用于 dom，不受此拼写影响，故能正常显示。
在使用 Tailwind CSS 时，一个看似微小却极其常见的错误是 HTML 标签中属性名拼写错误。正如你在示例代码中所见：
<div clas="h-full bg-rose-900"> <p>这里 clas 是 <strong>拼写错误</strong> —— 正确的属性名应为 class。由于<a style="color:#f60; text-decoration:underline;" title="浏览器" href="https://m.php.cn/zt/16180.html" target="_blank">浏览器</a>无法识别 clas 属性，所有后续的 Tailwind 类（如 h-full、bg-rose-900）均不会被解析或应用，因此背景色自然不会显示。</p> <p>而内联样式（style="background-color: rgb(136 19 55);"）之所以“能用”，是因为它不依赖 Tailwind 的类名机制，而是由浏览器原生解析 CSS 声明，与 class 属性是否存在、是否拼对完全无关。</p> <p>✅ 正确写法如下：</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill10828" title="财经HTML高端海报生成"><img src="https://img.php.cn/upload/skill/000/000/081/179336525482166.jpg" alt="财经HTML高端海报生成" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill10828" title="财经HTML高端海报生成" class="overflowclass">财经HTML高端海报生成</a> <p class="overflowclass">复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP</p> </div> <a rel="nofollow" href="/xiazai/skill10828" title="财经HTML高端海报生成" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <pre class="brush:php;toolbar:false;"><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 稳定工作的三大实践要点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
