Высота

Мы добавили над именем Луны блок с лапкой: div с эмодзи 🐾, светло-оранжевым фоном и нижним внешним отступом (mb-4). Пока он такой же широкий, как карточка, и такой же высокий, как его строка текста.

Высота работает так же, как ширина: h-12 — это 12 шагов, то есть 3rem, или 48 пикселей. И здесь тоже есть несколько особых классов:

В курсе CSS вы узнали, что высоту лучше всего не трогать: тогда блок растёт вместе с содержимым, и ничего не вылезает за края. В Tailwind это тоже так. Фиксированная высота подходит элементам, размер которых не зависит от содержимого: значкам, цветным полоскам, линиям и картинкам (с картинками вы поработаете в следующем уроке).

h-full — это полная высота родителя, но, как и height: 100%, работает только тогда, когда у родителя есть высота. h-screen делает элемент высотой с окно браузера. min-h-screen задаёт минимальную высоту: элемент не ниже окна, но растёт, если содержимому нужно больше места. Поэтому на страницах с Tailwind часто встречается <body class="min-h-screen">: страница занимает как минимум всё окно. Это пригодится для вертикального центрирования, которое вы изучите в уроке про Flexbox, Grid и Position. (На нашей странице сейчас разницы не видно: браузер всё равно закрашивает фон body на всё окно.)