Display

В этом уроке вы сверстаете верхнюю часть главной страницы приюта: шапку с навигацией, большой приветственный блок вверху (веб-дизайнеры называют его hero) и карточки наших четырёх кошек. Нужный CSS вы знаете из курса CSS: display, flexbox, grid и position. Теперь вы узнаете классы Tailwind, которые пишут его за вас.

На странице в редакторе уже есть классы из прошлых уроков: цвета, текст, отступы, скруглённые углы и тени. А вот макет пока самый обычный, в нормальном потоке: всё идёт одно под другим. Ссылки в навигации стоят столбиком, а карточки по ширине равны странице (прокрутите предпросмотр вниз, чтобы увидеть их).

Начнём со свойства display. В Tailwind у каждого его значения есть свой класс, названный по значению:

Только hidden назван не по значению. Он скрывает элемент: элемент не показывается и не занимает места, но остаётся в HTML. Не путайте его с invisible (visibility: hidden) и opacity-0: с ними элемент тоже не виден, но на его месте остаётся пустота. (Классы для display: flex и display: grid появятся в следующих упражнениях.)

Помните из курса CSS: строчный элемент, например ссылка, стоит в строке текста как слово. Его внутренний отступ сверху и снизу не отодвигает другие элементы, а внешние отступы сверху и снизу не работают совсем. Посмотрите на ссылку «Познакомьтесь с кошками» в hero-блоке: её оранжевый фон заходит на текст над ней, а класс mt-4 ничего не делает. (У кнопки «Поддержать» в навигации та же беда; с ней скоро справится flexbox.)