Was ist Tailwind?

Willkommen im Tailwind-CSS-Kurs! Im CSS-Kurs hast du Seiten ihr Aussehen gegeben, indem du Regeln in ein Stylesheet geschrieben hast. Tailwind CSS, kurz Tailwind, ist eine andere Art, dasselbe CSS zu schreiben, und heute eines der beliebtesten Werkzeuge zum Gestalten von Webseiten.

Um im CSS-Kurs eine Überschrift zu zentrieren, hast du in style.css eine Regel geschrieben:

h1 {
	text-align: center;
}

Mit Tailwind schreibst du die Regel nicht. Stattdessen gibst du dem Element direkt im HTML eine fertige Klasse:

<h1 class="text-center">Katzenheim Samtpfote</h1>

Die Klasse text-center steht für genau eine Deklaration: text-align: center. Solche Klassen heißen Utility-Klassen: Jede erledigt eine kleine Sache, meist eine CSS-Deklaration. Tailwind hat Tausende davon, für fast jede CSS-Eigenschaft und jeden Wert, die du kennst, und du gestaltest ein Element, indem du ihm die Klassen gibst, die es braucht. Damit ist Tailwind ein CSS-Framework: ein fertiger Satz von Stilen, aus dem du deine Seiten baust.

Warum sollte jemand CSS so schreiben?

• Du bleibst in einer Datei. Du siehst direkt im HTML, wie ein Element aussieht. Du musst nicht ins Stylesheet wechseln, um seine Regel zu suchen.
• Du musst nichts benennen. Du zerbrichst dir nicht mehr den Kopf über Namen wie titel-hintergrund oder karte für jedes Element, das du gestalten willst.
• Das Stylesheet wächst nicht endlos. Im CSS-Kurs bedeutete jeder neue Teil einer Seite neue Regeln, und alte Regeln blieben vorsichtshalber im Stylesheet, auch wenn sie nichts mehr gestalteten. Mit Tailwind sind die Stile weg, sobald du ein Element löschst.

Das hat allerdings seinen Preis: Das HTML wird länger. Ein Element hat oft fünf oder zehn Klassen, und anfangs kann dir das unordentlich vorkommen. Die meisten gewöhnen sich schnell daran, und später im Kurs lernst du Wege kennen, mit Klassen umzugehen, die du oft wiederholst.

Tailwind ist trotzdem CSS: Jede Klasse steht für CSS-Deklarationen, die du aus dem CSS-Kurs kennst. Alles, was du dort gelernt hast, gilt also weiter, vom Box-Modell bis zu Flexbox und Grid. Du schreibst es nur anders.

In diesem Kurs baust du die Webseite eines Katzenheims namens Samtpfote. Im Editor findest du seine allererste Startseite: reines HTML, wie du es aus dem HTML-Kurs kennst. Tailwind ist schon eingeschaltet: Die Datei style.css enthält eine einzige Zeile, die du in der nächsten Übung kennenlernst. Wundere dich nicht, dass die Überschrift wie normaler Text aussieht. Tailwind macht das mit Absicht, und warum, erfährst du später in dieser Lektion.

Über der Vorschau gibt es eine neue Leiste, die Vorschaubreite. Sie kann die Seite so breit zeigen wie der Bildschirm eines Smartphones, eines Tablets oder eines Computers. Du brauchst sie vor allem in der Lektion über responsives Design. Bis dahin lass sie auf „Einpassen“ stehen, außer eine Übung bittet dich, eine andere Breite auszuprobieren.