Центрирование

Вернёмся к hero-блоку. Его содержимое прижато к левому краю, а такое приветствие обычно стоит посередине области, и по горизонтали, и по вертикали.

В курсе CSS вы центрировали элементы по обеим осям с помощью display: flex, justify-content: center и align-items: center. В Tailwind это классы flex justify-center items-center. Наш hero-блок — колонка, поэтому оси повёрнуты: items-center центрирует его элементы по горизонтали, а justify-center — по вертикали.

Центрировать по вертикали имеет смысл, только когда контейнер выше своего содержимого. Класс min-h-96 (min-height: 24rem, 384 px) задаёт hero-блоку минимальную высоту: он не ниже этого значения и становится выше, если содержимому нужно больше места. (Вы знаете min-h-screen; min-h-* принимает и числа шкалы отступов.)

Центрировать умеет и сетка. Класс place-items-center (place-items: center) центрирует каждый элемент сетки в своей ячейке, по обеим осям. Для единственного потомка это самый короткий способ:

<div class="grid place-items-center size-24 rounded-full bg-orange-100">🐾</div>

Но у нашего hero-блока три потомка, и сетка положила бы каждого в отдельную строку и растянула бы строки на всю высоту. Для нескольких элементов нужен flexbox.

И ещё одно: когда вы меняете items-start на items-center, именно заменяйте. Если останутся оба класса, победит items-start, хотя items-center написан после него. Помните из урока о цветах и тексте: когда два класса задают одно свойство, порядок в атрибуте class не важен, важен только порядок их правил в таблице стилей, которую делает Tailwind.