由于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文件中更新，但我不知道路径格式。
我不太确定这个问题，但我建议您遵循Tailwind的安装说明，我会把它放在这里
此外，我发现你的顺风配置文件中的内容字段是空的，你应该在其中指定所有模板文件的路径。这里有一个例子，它指向src文件夹中的所有html和JS文件。希望这能帮助
module.exports = {
content: ["./src/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}
根据顺风文件：
tailwind.config.js
module.exports = {
content: [
'./pages/**/*.{html,js}',
'./components/**/*.{html,js}'
],
// ...
}
- 使用
*匹配除斜杠和隐藏文件之外的任何内容 - 使用
**匹配零个或多个目录 - 在
{}之间使用逗号分隔的值来匹配选项列表
https://tailwindcss.com/docs/content-configuration
向tailwind.config.js文件添加html文件路径"内容"；这里我的HTML文件在public文件夹中，styles.css在src文件夹中。重要的一步是立即运行此命令。
npx顺风css-i/src/styles.css-o/public/styles.css
则只有顺风类反映在实时服务器上
module.exports = {
content: ["./public/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}