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

【问题标题】：Tailwind CLI's --watch not working properlyTailwind CLI 的 --watch 无法正常工作
【发布时间】：2022-08-23 19:47:59
【问题描述】：

每次向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，但它仍然无法正常工作！

您的 index.html 文件是否与 tailwind.config.js 和 package.json 文件位于同一目录中？如果没有，它可能无法找到您更改的文件。您还可以验证您正在更改文件并且您的更改已成功进行。许多自动保存的编辑器只有在您散焦编辑器时才会这样做。
你的 index.html 是什么样的？

标签： tailwind-css

【解决方案1】：

假设这是您认为 Tailwind CLI 的工作方式：

这是你的input.css:
```
.aaa {
  color: blue;
}
```
1. 这是你的index.html:
```
...
<div class="aaa">AAA</div>
```
1. 你执行npm run build
2. 您转到index.html 并添加一个带有一些 Tailwind 类的 HTML 元素
```
...
<div class="aaa">AAA</div>
<div class="font-bold">BBB</div>
```
1. 您希望您的output.css 神奇地内置于其中：
```
.aaa {
  color: blue;
}
.font-bold {
  font-weight: 700;
}
```
这就是 Tailwind CLI 的实际工作方式：
1. 在input.css 中，您必须首先指定您认为将在index.html 中使用的 Tailwind 层。让我们添加一个名为 utilities 的层，它使您能够使用 Tailwind 类，例如 font-bold、underline 等。
```
@tailwind utilities;

.aaa {
    color: blue;
}
```
  1. 你执行npm run build
  2. 您转到index.html 并添加一个带有一些属于utilities 层的Tailwind 类的HTML 元素
```
...
<div class="aaa">AAA</div>
<div class="font-bold">BBB</div>
```
  1. 你去output.css et voila - Tailwind 类在那里：
```
.font-bold {
  font-weight: 700;
}
.aaa {
  color: blue;
}
```
  1. 您添加了另一个 Tailwind 类
```
...
<div class="aaa">AAA</div>
<div class="font-bold underline">BBB</div>
```
  瞧：
```
.font-bold {
  font-weight: 700;
}
.underline {
  -webkit-text-decoration-line: underline;
          text-decoration-line: underline;
}
.aaa {
  color: blue;
}
```

【讨论】：