Tailwind 类不适用于 html 文件答案

【问题标题】：Tailwind classes not working with html fileTailwind 类不适用于 html 文件
【发布时间】：2021-12-30 17:35:52
【问题描述】：

由于 tailwindcss，我得到了不同的字体输出，但类没有显示任何输出。

文件：

package.json

    {
  "dependencies": {
    "autoprefixer": "^10.4.1",
    "postcss": "^8.4.5",
    "tailwindcss": "^3.0.8"
  },
  "scripts": {
    "build-css": "tailwindcss build style.css -o css/style.css"
  }
}

style.css

@tailwind base;
@tailwind components;
@tailwind utilities;

tailwind.config.js

module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

index.html

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <div>
    <div>
      <h1 class="font-sans">Welcome to my tailwind course</h1>
      <h2 class="font-serif">Created by Varun Prasannan</h2>
      <p class="font-mono">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Commodi, dignissimos numquam temporibus quisquam optio suscipit neque iure nam ab architecto quaerat similique vero, a aperiam impedit dolores. Autem, iure expedita.</p>
    </div>
  </div>
</body>
</html>

如您所见，应用了不同的字体类，例如

class="font-sans"
class="font-serif"
class="font-mono"

但输出是相同的tailwindcss默认字体。

我感觉某些文件（我不知道）的路径必须在 tailwind.config.js 文件中进行更新，但我并不完全了解路径格式。

【问题讨论】：

您的content 数组在您的config file 中是否为空？

标签： html css tailwind-css

【解决方案1】：

我不太确定这个问题，但我建议您按照 Tailwind 的安装说明进行操作，我将其放在 here

此外，我发现您的 tailwind 配置文件中的内容字段是空的，您应该在其中指定所有模板文件的路径。这是一个示例，它的作用是指向 src 文件夹中的所有 html 和 JS 文件。希望这可能会有所帮助

module.exports = {
  content: ["./src/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

【讨论】：

我在尝试使用 Vite 设置项目时也遇到了类似的问题。未安装 Postcss。官方的 Tailwind 安装说明有所帮助。在我的例子中，没有生成 postcss 配置文件，因此没有一个 tailwindcss 文件被识别。