Flexbox

Теперь сверстаем навигацию. В курсе CSS вы включали flexbox объявлением display: flex у родителя элементов, которые должны стоять рядом. В Tailwind для этого есть класс flex:

.flex {
	display: flex;
}

Элемент с классом flex становится flex-контейнером, а его дочерние элементы — flex-элементами: они выстраиваются в ряд слева направо.

Промежутки между элементами задают классы gap-* (свойство gap). Они используют шкалу отступов, которую вы знаете по внутренним и внешним отступам: gap-2 — это 0.5rem (8 px), gap-4 — 1rem (16 px), gap-6 — 1.5rem (24 px). Класс gap-x-* задаёт промежутки только между столбцами (column-gap), а gap-y-* — только между строками (row-gap).

Почему бы не дать каждой ссылке внешний отступ, например mr-4? Его пришлось бы писать у каждой ссылки, а у последней после неё появился бы лишний промежуток. gap пишется один раз, у контейнера, и промежутки появляются только между элементами.

Ссылки навигации лежат в списке (ul), каждая в своём li. Элементы списка — блочные, поэтому ссылки стоят одна под другой. (Маркеры убрал Preflight — базовые стили Tailwind.)