Breite und Höhe zugleich

Quadrate gibt es auf Webseiten überall: Symbole, Profilbilder, kleine Bilder. w-12 h-12 für jedes davon zu schreiben ist so häufig, dass Tailwind eine kürzere Klasse für beides zugleich hat, size-12:

.size-12 {
	width: 3rem;
	height: 3rem;
}

Sie nimmt dieselben Werte wie w-* und h-*: Zahlen der Skala (size-8, size-16), Brüche und size-full.

Die Pfote ist in ihrem Kasten waagerecht zentriert (dank text-center), sitzt aber etwas zu hoch. Der Kasten ist 48 Pixel hoch, seine Textzeile aber nur 32, denn das ist die Zeilenhöhe, die text-2xl setzt. Text sitzt in der Mitte der Höhe seiner Zeile, ist die Zeile also so hoch wie der Kasten, landet die Pfote in der Mitte. Und auch die Klassen leading-* für die Zeilenhöhe, die du aus der letzten Lektion kennst, nehmen Zahlen der Abstandsskala: leading-12 ist line-height: 3rem, 48 Pixel. (Dieser Trick funktioniert nur bei einer einzelnen Zeile. Einen allgemeineren Weg, etwas in einem Kasten zu zentrieren, lernst du in der Lektion über Flexbox, Grid und Position.)