在 HTML 中添加或删除类时，tailwind.config.js 中的更改未反映在 output.css 中

Question

当我向 HTML 添加新类时，我需要在 tailwind.config.js 文件中进行更改并保存。当我从 HTML 中删除一个类时，这同样适用； output.css 文件中对应的样式可能不会被删除，所以我必须在 tailwind.config.js 文件中再次保存更改。

package.json 文件：

{
  "name": "vue-js",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "tailwindcss": "^3.3.2"
  }
}

tailwind.config.js 文件：

{
  "name": "vue-js",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "tailwindcss": "^3.3.2"
  }
}

我应该运行 npm run build 或 dev 或 npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch 一次，每次保存 html 文件时，tailwind 应该将我的新类添加到output.css。 但这不起作用。我已经按照 Tailwind CSS 官方网站上的文档进行操作，并且还在 VS Code 中安装了 Live Preview、Live Server 和 Tailwind Intellisense 等扩展，但仍然不起作用。请帮助我，我想学习 Tailwind CSS，但我因此感到沮丧。

我尝试观看 YouTube 频道“网络编程 UNPAS”并按照确切的步骤操作，但它仍然保持不变。

Answer 1

您的 Tailwind 配置不正确，并且似乎与您的

package.json

有重复的内容。相反，请考虑阅读有关 Tailwind 配置文件正确格式的文档。