将实用程序类添加到正文标记答案

【问题标题】：Adding Utility Classes to the Body Tag将实用程序类添加到正文标记
【发布时间】：2021-06-04 13:41:16
【问题描述】：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body class="bg-green-400 h-screen">
test

</body>
</html>

不起作用。这可能是什么原因？添加到 body 标记的任何实用程序类都将不起作用

【问题讨论】：

标签： tailwind-css

【解决方案1】：

您的示例 HTML 不包含样式表，因此未定义 bg-green-400 和 h-screen 类。

在生产环境中，您应该使用经过适当清除的 CSS 文件，但为了进行测试，您可以使用以下方法从 CDN 加载 Tailwind：

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

这是包含此样式表的 HTML 的小提琴，您使用的两个类都在工作：https://jsfiddle.net/vrung30L/

【讨论】：

您的代码有效。我想知道为什么它在这里不起作用play.tailwindcss.com/XLfpavD9LR
@zaster 您在 Tailwind Play 编辑器中输入的整个代码似乎都放置在右侧的标记中，因此使用它似乎无法满足您的特定要求Tailwind Play，但您应该可以在其他地方使用 body 标签上的类。