Tailwind 类不适用于 html 文件

Question

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

文件：

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"
  }
}

样式.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"

但 output 是相同的 tailwindcss 默认字体。

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

Answer 1

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

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

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

Answer 2

将 html 文件路径添加到 tailwind.config.js 文件“内容”选项卡。 这里我的 HTML 文件在公共文件夹中，styles.css 在 src 文件夹中。 重要的一步是立即运行此命令。

npx tailwindcss -i./src/styles.css -o./public/styles.css

那么只有顺风课程反映在实时服务器上

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

Answer 3

根据 Tailwind 文档：

tailwind.config.js

module.exports = {
  content: [
    './pages/**/*.{html,js}',
    './components/**/*.{html,js}'
  ],
  // ...
}

使用*匹配除斜杠和隐藏文件以外的任何内容
使用**匹配零个或多个目录
在{}之间使用逗号分隔值来匹配选项列表

https://tailwindcss.com/docs/content-configuration

Tailwind 类不适用于 html 文件

问题描述

3 个解决方案

解决方案1
1 已采纳 2021-12-30 09:35:52

解决方案2
0 2022-06-14 10:08:27

解决方案3
0 2022-12-04 02:19:54

Tailwind 类不适用于 html 文件

问题描述

3 个解决方案

解决方案1 1 已采纳 2021-12-30 09:35:52

解决方案2 0 2022-06-14 10:08:27

解决方案3 0 2022-12-04 02:19:54

解决方案1
1 已采纳 2021-12-30 09:35:52

解决方案2
0 2022-06-14 10:08:27

解决方案3
0 2022-12-04 02:19:54