Tailwind CLI 的 --watch 无法正常工作

Question

每次我向index.html文件添加新类时，我都需要output.css手动重建文件。

package.json 文件：

{
  "name": "tailwind-practice",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "npx tailwindcss --watch -i ./input.css -o ./output.css"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "tailwindcss": "^3.1.7"
  }
}

tailwind.config.js 文件：

/** @type {import('tailwindcss').Config} */
module.exports = {
  screens: {
    'sm': '480px',
    'md': '768px',
    'lg': '1440px',
  },
  content: ['./index.html'],
  theme: {
    extend: {},
  },
  plugins: [],
}

我应该运行npm run build一次，每次保存 html 文件时，tailwind 都应该将我的新类添加到output.css. 但事实并非如此。保存后我检查了文件index.html，但在那里找不到我的新课程。但 CLI 无耻地说它在 20 毫秒内重建了它。我需要npm run build每次运行才能成功构建我的 css 文件。另外，我删除了之前安装的 Nodejs，并重新安装了当前版本，更新了 VS Code，更新了 Google Chrome，现在，我正在考虑从 Manjaro 迁移回 Windows。

编辑：一个有用的观察。

保存后index.html，CLI 会这样说：

Rebuilding...
Done in 27ms.

但是当我停止该过程并重新运行时npm run build，它说：

Rebuilding...
Done in 198ms.

实际工作时有比较大的时间延迟。

编辑2：

当我index.html快速保存多次时它会起作用。

我从 Manjaro 迁移到 Ubuntu，但它仍然无法工作！

Answer 1

您需要将这些添加到您的 input.css 中才能--watch正常工作。

@tailwind base;
@tailwind components;
@tailwind utilities;

如果没有这些，TW 将不知道应该从哪里提取 CSS 类的信息并在 output.css 中写入处理后的版本

假设您写<h1 class="underline">Hello world! </h1>的是index.html. Tw 需要查找有关如何解析+处理该类的信息underline，以及应在 output.css 中编写有关该类的内容。

尝试一下，让我知道它是否有效。