Die Farbpalette

In dieser Lektion gibst du einer Seite ihre Farben und kümmerst dich um ihren Text: Größe, Stärke, Zeilenhöhe, Ausrichtung, Buchstabenabstand und Schriftart. All das kennst du aus dem CSS-Kurs, jetzt machst du es mit den Klassen von Tailwind.

Wir arbeiten an der Seite von Tiger auf der Webseite unseres Tierheims. Tiger ist ein zweijähriger getigerter Kater, der ein neues Zuhause sucht. Sieh dir den Code an: Die Überschrift hat schon die Klassen text-3xl und font-bold aus der letzten Lektion, und der Link ist unterstrichen (underline). Die Seite hat auch ein paar Klassen, die du noch nicht kennst: mx-auto max-w-xl p-8 am Element main und mt-3, mt-4 und ähnliche an einigen Absätzen. Sie schaffen Platz um die Teile der Seite und zwischen ihnen, damit der Text nicht an den Rand der Vorschau stößt. Du lernst sie in der nächsten Lektion kennen, lass sie vorerst, wie sie sind.

Im CSS-Kurs hast du die Farbe von Text mit der Eigenschaft color gesetzt, in einer Regel in style.css. Mit Tailwind gibst du dem Element eine Klasse:

<h1 class="text-orange-600">Tiger</h1>

Der Name der Klasse besteht aus drei Teilen: text sagt, was die Farbe bekommt (der Text), orange ist die Farbe und 600 ihre Abstufung. Tailwind macht daraus diese Regel:

.text-orange-600 {
	color: oklch(64.6% 0.222 41.116);
}

(Das genaue CSS von Tailwind sieht ein wenig anders aus, aber die Farbe ist dieselbe.) oklch ist eine weitere Schreibweise für Farben. Sie funktioniert wie HSL aus dem CSS-Kurs: Die erste Zahl ist die Helligkeit (64,6 %), die zweite sagt, wie kräftig die Farbe ist, und die dritte ist ihre Position auf dem Farbkreis in Grad (41°, Orange). Du musst sie nicht selbst schreiben: In Tailwind wählst du Farben über ihre Namen.

Tailwind bietet nicht alle 16 Millionen Farben an. Es hat eine Farbpalette: eine Auswahl von Farben, die Designer so gewählt haben, dass sie gut zusammenpassen. Sie hat 26 Farben, 17 bunte und 9 Grautöne, jeder Grauton mit einem leicht anderen Stich:

red orange amber yellow lime green emerald teal cyan sky blue indigo violet purple fuchsia pink rose

slate gray zinc neutral stone taupe mauve mist olive

Jede Farbe gibt es in 11 Abstufungen, nummeriert von 50 (der hellsten) über 100, 200 und so weiter bis 900 und 950 (der dunkelsten). Das sind die Abstufungen von Orange:

50 100 200 300 400 500 600 700 800 900 950

Dazu kommen black und white ohne Abstufung: text-black, text-white.

Warum eine Palette, wenn CSS jede Farbe kann? Weil sie die Auswahl erleichtert: Statt nach dem richtigen Farbcode zu suchen, nimmst du einen Namen und eine Zahl, und Farben aus einer Palette passen gut zusammen. Und wenn du text-orange-600 im HTML siehst, weißt du sofort, welche Farbe es ist. Später im Kurs siehst du, wie du auch eigene Farben verwendest.

Achte auf Tippfehler und erfundene Namen: Klassen wie text-orange (ohne Abstufung) oder text-orange-650 gibt es nicht, sie bewirken also nichts, und du bekommst keinen Fehler. Wie du weißt, schreibt Tailwind CSS nur für die Klassen, die es kennt.