Zusammenfassung

In dieser Lektion haben wir gelernt:

• Tailwind CSS ist ein CSS-Framework aus Utility-Klassen: kleinen Klassen, die je eine Sache tun, meist eine CSS-Deklaration. Statt Regeln in ein Stylesheet zu schreiben, gibst du Elementen direkt im HTML Klassen, etwa <h1 class="text-center">.
• Tailwind schaltest du mit der Zeile @import "tailwindcss"; in style.css ein, die die Seite wie gewohnt einbindet. Wenn du auf Ausführen klickst, findet Tailwind die Klassennamen in deinem HTML und schreibt CSS für genau die, die es kennt. Auf deinem eigenen Computer erledigt das ein Programm.
• Ein Element kann mehrere Klassen in einem Attribut class haben, durch Leerzeichen getrennt und in beliebiger Reihenfolge. Eine Klasse kann an beliebig vielen Elementen stehen.
• Preflight, die Basisstile von Tailwind, entfernt die eingebauten Stile des Browsers: Überschriften sehen wie einfacher Text aus, nichts hat Abstände, Listen haben keine Aufzählungspunkte, und Links sehen wie normaler Text aus. Das ganze Aussehen kommt aus deinen Klassen.
• Ein Klassenname sagt, was die Klasse tut, und besteht meist aus CSS, das du kennst. Klassen kannst du unter tailwindcss.com/docs nachschlagen.
• Eine falsch geschriebene Klasse gibt keinen Fehler aus, sie bewirkt einfach nichts. Ein Fehler in style.css erscheint rot unter der Vorschau, und die Seite bekommt dann überhaupt kein CSS von Tailwind.

Die Klassen aus dieser Lektion:

In der nächsten Lektion, Farben und Text, lernst du die Farbpalette von Tailwind kennen und stellst Größe, Stärke und weitere Eigenschaften von Text ein.

Zum Üben: Unten auf der Seite haben wir einen Kasten mit den Öffnungszeiten hinzugefügt: ein Element section mit einer Überschrift h2 und einem Absatz. Gestalte ihn mit den Klassen aus dieser Lektion.