Tailwind 类无法使用 html 文件

Question

由于 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 文件中更新，但我不知道不知道路径格式。

Answer 1

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

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

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

Tailwind 类无法使用 html 文件

Tailwind classes not working with html file

html

css

tailwind-css

Tailwind 类 无法使用 html 文件

Tailwind classes not working with html file

html

css

tailwind-css

Tailwind 类无法使用 html 文件