Wenn eine Klasse nichts bewirkt

Wir haben der Seite drei weitere Klassen hinzugefügt, damit die ganze Seite zentriert ist und der Link auffällt: text-center für die Liste und für den Absatz mit dem Link sowie font-bold für den Link. Zumindest haben wir es versucht. Sieh dir die Vorschau an: Die Liste steht immer noch links, und der Link ist nicht fett. In zwei der Klassen haben wir uns vertippt, und nichts sagt dir das.

So funktioniert Tailwind: Eine falsch geschriebene Klasse gibt keinen Fehler aus, sie bewirkt einfach nichts. Tailwind schreibt CSS nur für ganze Klassennamen, die es kennt. Ein Wort wie text-cetner gehört nicht dazu, also überspringt Tailwind es, und eine Klasse ohne CSS bewirkt nichts, genau wie eine Klasse, die keine Regel deines Stylesheets auswählt. Tailwind kann dich nicht warnen, denn das Attribut class kann auch Klassen enthalten, die gar nicht für Tailwind gedacht sind, etwa deine eigenen.

Wenn eine Klasse nicht zu funktionieren scheint:

• Prüfe ihre Schreibweise, Buchstabe für Buchstabe. text-cetner und text-center sehen auf den ersten Blick gleich aus.
• Prüfe, ob sie innerhalb der Anführungszeichen des Attributs class steht und ob das Element nur ein Attribut class hat.
• Schlage sie in der Dokumentation nach. Vielleicht heißt die Klasse anders, als du denkst.

Fehler in style.css sind anders. Tailwind liest die ganze Datei, und wenn es etwas findet, das es nicht versteht, erzeugt es überhaupt kein CSS. Die Seite verliert alle ihre Tailwind-Stile, und eine rote Meldung unter der Vorschau sagt, was nicht stimmt. Wenn in style.css zum Beispiel einer Regel die schließende geschweifte Klammer fehlte:

@import "tailwindcss";

h1 {
	letter-spacing: 2px;

würdest du diese Meldung sehen:

style.css: Missing closing } at h1

Du kannst es ausprobieren: Füge am Ende von style.css die Zeile h1 { hinzu und klicke auf Ausführen. Lösche die Zeile danach wieder.

Es gibt eine Ausnahme: die Zeile mit @import selbst. Wenn du sie falsch schreibst, zum Beispiel als @import "tailwind";, erkennt die Seite sie nicht als Tailwind und zeigt sich ohne Tailwind und ohne jede Meldung, so wie vorhin, als wir style.css geleert haben. Wenn die ganze Seite plötzlich wie schlichtes HTML mit den eingebauten Stilen des Browsers aussieht, prüfe also zuerst diese Zeile.