为body标签添加utility classes不生效的可能原因有哪些

核心原因 #

你用到的bg-green-400、h-screen属于Tailwind CSS框架提供的工具类，当前你的HTML代码中没有引入任何Tailwind CSS相关的样式资源，浏览器无法识别这些自定义类名，因此样式不会生效。

其他可能的触发原因 #

如果已经引入Tailwind仍然不生效，可以排查以下问题：

• 本地安装Tailwind的场景下，检查tailwind.config.js中的content配置项是否包含当前HTML文件的路径，Tailwind没有扫描到的文件中用到的工具类不会被生成到最终的CSS产物里。
• 检查是否存在更高优先级的样式覆盖了body的属性，比如自定义的全局body样式添加了!important标记，或其他引入的样式库对body标签做了样式重置。
• 检查类名拼写是否存在笔误，比如错误拼写为bg-green-40、h-scren等都会导致样式不匹配。

快速修复示例 #

你可以直接在head标签中引入Tailwind的CDN链接快速验证效果，修改后的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 引入Tailwind CSS CDN -->
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-green-400 h-screen">
test
</body>
</html>

内容的提问来源于stack exchange，提问作者zaster