Height

We've added a box with a paw above Luna's name: a div with an emoji 🐾, a light orange background and a bottom margin (mb-4). For now, it's as wide as the card and as tall as its line of text.

Heights work just like widths: h-12 is 12 steps, which is 3rem or 48 pixels. And there are a few special classes here, too:

In the CSS course, you learned that it's usually best to leave the height alone: the box then grows with its content, and nothing overflows. That holds in Tailwind too. A fixed height suits elements whose size doesn't come from their content: icons, color strips, lines and pictures (you'll work with pictures in the next lesson).

h-full is the full height of the parent, but just like height: 100%, it only works when the parent has a height. h-screen makes an element as tall as the browser window. min-h-screen sets a minimum height: the element is at least as tall as the window, but grows when its content needs more room. That's why you'll often see <body class="min-h-screen"> on pages with Tailwind: the page then fills at least the whole window. It's useful for vertical centering, which you'll learn in the lesson on Flexbox, Grid and Position. (On our page, you wouldn't see a difference now: the browser paints the background of body over the whole window anyway.)