这是我第一次使用 Tailwind，我只是设置它而已。 我正在学习 Udemy 上的一门课程，我已经完成了每一步两次，但我的操作并不像视频中那样有效。
使用 Tailwind 应用的样式可以正常工作，但每次我添加新内容时，我都必须使用
npm run build-css看视频的时候，他会添加一个新的样式类，然后保存，然后刷新浏览器，变化就出现了。
我在这里缺少什么吗？ 我一直在寻找答案有一段时间了，找不到任何帮助。
package.json
{
"name": "package.json",
"version": "1.0.0",
"description": "package.json",
"main": "tailwind.config.js",
"dependencies": {
"autoprefixer": "^10.4.7",
"postcss": "^8.4.14"
},
"devDependencies": {
"tailwindcss": "^3.0.24"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build-css": "tailwindcss build -i style.css -o css/style.css"
},
"author": "",
"license": "ISC"
}
tailwind.config.js
module.exports = {
content: ["./*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
};
样式.css
@tailwind base;
@tailwind components;
@tailwind utilities;
使用构建命令只会更新该实例上的输出文件。您应该使用 watch 命令，以便不断更新输出文件。这是我使用 Tailwind 开发的脚本。
/package.json/
"scripts": {
"start": "react-scripts start",
"build-css": "tailwindcss build -i ./src/input.css -o ./public/output.css",
"watch-css": "tailwindcss build -i ./src/input.css -o ./public/output.css --watch",
"dev": "concurrently \"npm run watch-css\" \"npm start\""
},
运行“npm run watch-css”而不是“npm run build-css”[将文件位置替换为您自己的文件。 -i 之后是输入 css 文件的位置，-o 之后是输出 css 文件的位置]。
如果您尝试使用 React，您可以安装 concurrently 以同时运行脚本。在这种情况下，我正在启动我的本地 ReactJS 项目，我正在观看 Tailwind 输出文件。或者你可以只打开两个终端并运行两个脚本。
我认为您在 html 文件上遗漏了一些链接 CSS 的内容。我只是复制了你的代码并添加了这个 html。
检查与您具有相同结构的屏幕截图。 https://prnt.sc/knox4-8NCK2e
<!DOCTYPE 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>Tailwind CSS</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<div class="bg-red-300 h-40">
<h1 class="text-2xl">Tailwind CSS works</h1>
</div>
</body>
</html>
现在运行命令：
就我而言，我运行 watch 而不是 build，它解决了我的问题。
npm run watch
这对你有帮助。
您可以将（ -i 和 -w ）添加到对我有效的 package.json 文件中
"scripts": { "build-css": "tailwindcss build -i src/styles.css -o public/styles.css -w" },