Tailwind类别失效的原因是什么？

Question

我第一次开始使用Tailwind，并且目前只在JavaScript中使用它。第一天，类名都正常工作，但是第二天我在VSCode中打开项目时，只有之前添加的Tailwind类名仍然有效。如果我尝试在我的HTML中添加更多类名和设计，什么都不会发生。

例如，当我在h2标签中添加text-3xl时，文字字体大小不会改变。此外，如果我为文本添加新的颜色或添加背景颜色，也不会生效。

链接到我的所有代码和文件在Github中

<div class="flex flex-col md:w-1/2">
  <h2 class="text-center text-3xl font-bold md:text-left">跟踪公司整体进展</h1>
  <p class="text-center md:text-left mt-4 mb-6">了解你的日常任务如何符合更广阔的愿景。从里程碑级别的进展跟踪到最细微的细节。再也不会失去对整体大局的视野。</p>
</div>

Answer 1

Tailwind在输出的CSS文件中并没有包含所有的实用类。相反，它在构建过程中解析出您在代码中使用的类，并仅将这些类添加到输出文件中。

因此，如果您在代码中添加了类，您需要重新运行构建过程，可以手动运行或在构建命令中包含--watch选项。例如：

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

注意：这也是为什么在浏览器开发工具的DOM检查器中添加以前未使用的实用类不会立即影响页面元素的原因。