Width and Height at Once

Squares are everywhere on web pages: icons, profile pictures, small images. Writing w-12 h-12 for each of them is so common that Tailwind has a shorter class for both at once, size-12:

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

It takes the same values as w-* and h-*: numbers of the scale (size-8, size-16), fractions and size-full.

The paw is centered horizontally in its box (thanks to text-center), but it sits a bit high. The box is 48 pixels tall, but its line of text only 32, because that's the line height that text-2xl sets. Text sits in the middle of the height of its line, so when the line is as tall as the box, the paw ends up in the middle. And the leading-* classes for the line height, which you know from the previous lesson, also take numbers of the spacing scale: leading-12 is line-height: 3rem, 48 pixels. (This trick only works for a single line. You'll learn a more general way to center things in a box in the lesson on Flexbox, Grid and Position.)