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檢查器中添加以前未使用的實用類別不會立即影響頁面元素的原因。