Schriftgröße

In der letzten Lektion hast du eine Überschrift mit text-3xl größer gemacht. Das ist eine Stufe auf der Skala der Schriftgrößen von Tailwind:

xs, sm, lg und xl sind wie Kleidergrößen: extra small, small, large, extra large. text-base ist die Basisgröße, 16 Pixel. Ab xl bedeutet jedes weitere x eine größere Stufe: 2xl, 3xl und so weiter. Es gibt noch größere Stufen, bis zu text-9xl (8rem, 128 px).

Die Größen sind in rem angegeben, sie berücksichtigen also die Schriftgröße, die der Besucher im Browser eingestellt hat, wie du aus dem CSS-Kurs weißt. Und jede Größenklasse setzt auch eine dazu passende Zeilenhöhe: Die Größen für normalen Text bekommen großzügige Zeilen, etwa das Anderthalbfache der Schriftgröße, damit sie gut lesbar sind; große Überschriften bekommen engere (ab text-5xl ist eine Zeile genau so hoch wie die Schrift), damit eine zweizeilige Überschrift zusammenhält.

Vielleicht ist dir aufgefallen, dass die Größenklassen genau wie die Farbklassen (text-orange-600) und text-center mit text- beginnen. Tailwind unterscheidet sie an dem, was folgt: eine Größe, eine Farbe oder eine Ausrichtung.

Um die Größe der Überschrift zu ändern, ersetze text-3xl durch eine andere Größe, füge keine zweite hinzu. Wie du aus dem CSS-Kurs weißt, gewinnt von zwei Regeln mit gleicher Spezifität, die dieselbe Eigenschaft setzen, die, die im Stylesheet später kommt. Alle Tailwind-Klassen haben dieselbe Spezifität (eine Klasse). Hat ein Element zwei Größen, entscheidet also die Reihenfolge ihrer Regeln im CSS von Tailwind, nicht ihre Reihenfolge im Attribut class. Mit class="text-4xl text-3xl" bekommt die Überschrift zum Beispiel die Größe text-4xl, obwohl text-3xl zuletzt steht. Damit du nicht raten musst, gib jedem Element für jede Eigenschaft nur eine Klasse.