Höhe

Wir haben über Lunas Namen einen Kasten mit einer Pfote hinzugefügt: ein div mit dem Emoji 🐾, einem hellorangen Hintergrund und einem unteren Margin (mb-4). Vorerst ist er so breit wie die Karte und so hoch wie seine Textzeile.

Höhen funktionieren genau wie Breiten: h-12 sind 12 Stufen, also 3rem oder 48 Pixel. Und auch hier gibt es ein paar besondere Klassen:

Im CSS-Kurs hast du gelernt, dass man die Höhe meist am besten in Ruhe lässt: Der Kasten wächst dann mit seinem Inhalt, und nichts läuft über. Das gilt auch in Tailwind. Eine feste Höhe passt zu Elementen, deren Größe nicht von ihrem Inhalt kommt: Symbole, Farbstreifen, Linien und Bilder (mit Bildern arbeitest du in der nächsten Lektion).

h-full ist die volle Höhe des Elternelements, funktioniert aber wie height: 100% nur, wenn das Elternelement eine Höhe hat. h-screen macht ein Element so hoch wie das Browserfenster. min-h-screen setzt eine Mindesthöhe: Das Element ist mindestens so hoch wie das Fenster, wächst aber, wenn sein Inhalt mehr Platz braucht. Darum siehst du bei Seiten mit Tailwind oft <body class="min-h-screen">: Die Seite füllt dann mindestens das ganze Fenster. Das ist nützlich zum vertikalen Zentrieren, das du in der Lektion über Flexbox, Grid und Position lernst. (Auf unserer Seite würdest du jetzt keinen Unterschied sehen: Der Browser malt den Hintergrund von body ohnehin über das ganze Fenster.)