Ширина и высота сразу

Квадраты на веб-страницах встречаются повсюду: значки, аватарки, маленькие картинки. Писать w-12 h-12 для каждого из них приходится так часто, что в Tailwind есть более короткий класс для обоих свойств сразу — size-12:

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

Он принимает те же значения, что w-* и h-*: числа шкалы (size-8, size-16), дроби и size-full.

Лапка стоит по центру блока по горизонтали (благодаря text-center), но расположена чуть выше середины. Блок высотой 48 пикселей, а его строка текста — всего 32, потому что именно такую высоту строки задаёт text-2xl. Текст стоит посередине высоты своей строки, поэтому, когда строка такая же высокая, как блок, лапка оказывается посередине. А классы leading-* для высоты строки, которые вы знаете из прошлого урока, тоже принимают числа шкалы: leading-12 — это line-height: 3rem, то есть 48 пикселей. (Этот приём работает только для одной строки. Более общий способ центрировать содержимое блока вы узнаете в уроке про Flexbox, Grid и Position.)