Was ist der Grund für das Scheitern der Kategorie „Rückenwind“?

Question

Ich habe zum ersten Mal mit Tailwind begonnen und verwende es derzeit nur mit JavaScript. Am ersten Tag funktionierten alle Klassennamen einwandfrei, aber als ich das Projekt am nächsten Tag in VSCode öffnete, funktionierte nur noch der zuvor hinzugefügte Tailwind-Klassenname. Wenn ich versuche, meinem HTML weitere Klassennamen und Designs hinzuzufügen, passiert nichts.

Wenn ich beispielsweise text-3xl im h2-Tag hinzufüge, ändert sich die Textschriftgröße nicht. Auch wenn ich dem Text eine neue Farbe oder eine Hintergrundfarbe hinzufüge, wird dies nicht wirksam.

Link zu meinem gesamten Code und meinen Dateien in Github

<div class="flex flex-col md:w-1/2">
  <h2 class="text-center text-3xl font-bold md:text-left">Verfolgen Sie den Gesamtfortschritt des Unternehmens</h1>
  <p class="text-center md:text-left mt-4 mb-6">Verstehen Sie, wie Ihre täglichen Aufgaben in die umfassendere Vision passen. Verfolgen Sie den Fortschritt von der Meilensteinebene bis ins kleinste Detail. Verlieren Sie nie wieder den Blick für das große Ganze. </p>
</div>

Answer 1

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

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

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

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