Tailwind einschalten

Browser verstehen nur CSS. Von Tailwind haben sie noch nie gehört. Woher kommt also das CSS für text-center? Tailwind ist auch ein Programm, das CSS für dich schreibt, und die Zeile in style.css schaltet es ein:

@import "tailwindcss";

Die Regel @import holt ein anderes Stylesheet in deines, hier das von Tailwind. Die Seite bindet style.css mit dem Element link im head ein, genau wie im CSS-Kurs. Wenn du auf Ausführen klickst, passiert Folgendes:

1. Tailwind geht index.html durch und sammelt jedes Wort, das ein Klassenname sein könnte.
2. Für jedes Wort, das eine seiner Klassen ist, etwa text-center, schreibt es eine CSS-Regel. Alle anderen Wörter überspringt es.
3. Das CSS, das es geschrieben hat, tritt an die Stelle der Zeile mit @import, und die Seite bekommt es über style.css.

Der Browser erhält also ein Stylesheet mit dem CSS für genau die Klassen, die deine Seite verwendet, und sonst nichts. Darum wird es nie von allein größer: Wenn du eine Klasse aus dem HTML löschst, verschwindet ihr CSS beim nächsten Ausführen.

Auf deinem eigenen Computer übernimmt ein Programm diese Aufgabe. Im Abschlussprojekt siehst du, wie du es einrichtest. Hier erledigt das die Seite für dich.

Wir haben style.css geleert, Tailwind ist jetzt also aus. Die Überschrift hat noch die Klasse text-center, steht aber links: Niemand hat das CSS für die Klasse geschrieben, und eine Klasse ohne CSS bewirkt nichts. Achte auch darauf, wie anders die Seite aussieht: Die Überschrift ist groß und fett, die Liste hat Aufzählungspunkte, und der Link ist blau und unterstrichen. Das sind die eingebauten Stile des Browsers. Sieh dir an, was mit ihnen passiert, wenn du Tailwind einschaltest.