Zusammenfassung

In dieser Lektion hast du gelernt:

• Tailwind hat eine Farbpalette mit 26 Farben, jede in 11 Abstufungen von 50 (der hellsten) bis 950 (der dunkelsten), dazu black, white und transparent.
• Farbklassen folgen einem Muster: was die Farbe bekommt, die Farbe und ihre Abstufung. text-orange-600 setzt die Farbe des Textes, bg-emerald-100 die Farbe des Hintergrunds.
• Text ist gut lesbar, wenn die Abstufungen von Text und Hintergrund weit auseinanderliegen: heller Hintergrund mit dunklem Text oder umgekehrt.
• Die Farbe des Textes wird vererbt, die Farben der ganzen Seite stehen also an body: bg-stone-50 text-stone-800.
• Ein Schrägstrich und eine Zahl machen eine Farbe transparent: bg-orange-500/20 ist Orange mit 20 % Deckkraft.
• Die Schriftgrößen reichen von text-xs (12 px) über text-base (16 px) bis text-9xl, in rem, und jede setzt auch eine Zeilenhöhe.
• Ein Element sollte für jede Eigenschaft nur eine Klasse haben: Ersetze eine Klasse, statt eine zweite hinzuzufügen. Welche von zwei solchen Klassen gewinnt, hängt von der Reihenfolge im CSS von Tailwind ab, nicht von ihrer Reihenfolge in class.
• Die Stärke reicht von font-thin (100) bis font-black (900); am häufigsten sind font-normal, font-medium, font-semibold und font-bold.
• Die Klassen leading- setzen die Zeilenhöhe (leading-relaxed für Absätze), und text-left, text-center, text-right und text-justify die Ausrichtung.
• Die Klassen tracking- setzen den Abstand zwischen Buchstaben, und uppercase, lowercase, capitalize und normal-case die Schreibweise der Buchstaben.
• font-sans (der Standard), font-serif und font-mono wählen die Schriftart. underline, line-through und no-underline zeichnen eine Linie oder entfernen sie, die Klassen decoration- setzen ihre Farbe und underline-offset- ihren Abstand zum Text.

Tigers Seite hat jetzt einen eigenen warmen Look: ein oranger Name in einer Serifenschrift, weicher grauer Text auf hellem Hintergrund, ein grünes Badge und ein oranger Link. In der nächsten Lektion, Abstände und Größen, lernst du die Klassen für den Platz kennen, die wir auf den Seiten schon verwendet haben: Padding, Margins, Breite und Höhe.

Zum Üben haben wir einen kleinen Kasten vorbereitet, der um Spenden bittet. Gestalte ihn mit dem, was du gelernt hast.