Flexbox

Flexbox вы знаете по учебнику HTML и CSS. В Tailwind каждое его свойство стало коротким классом, и раскладка описывается прямо в разметке: flex items-center justify-between gap-4.

Включение и промежутки

flex делает элемент flex-контейнером, gap- задаёт расстояние между детьми по шкале:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<div class="flex gap-3">
  <div class="bg-indigo-100 p-3">Аудио</div>
  <div class="bg-indigo-100 p-3">Колонки</div>
  <div class="bg-indigo-100 p-3">Зарядки</div>
</div>

Три блока стоят в ряд с промежутками 12 пикселей. flex-col ставит их в колонку, gap-x- и gap-y- задают промежутки по осям отдельно.

Выравнивание

Класс	CSS
`justify-start`	`justify-content: flex-start`
`justify-center`	`justify-content: center`
`justify-between`	`justify-content: space-between`
`justify-end`	`justify-content: flex-end`
`items-start`	`align-items: flex-start`
`items-center`	`align-items: center`
`items-end`	`align-items: flex-end`
`items-stretch`	`align-items: stretch`

Нижняя строка карточки товара — цена слева, кнопка справа, обе по центру по высоте:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<div class="flex max-w-xs items-center justify-between rounded-lg border border-gray-200 p-4">
  <span class="text-xl font-bold">$79</span>
  <button class="rounded-lg bg-indigo-600 px-4 py-2 text-sm text-white">В корзину</button>
</div>

Растягивание и сжатие

flex-1 позволяет элементу занять всё свободное место, shrink-0 запрещает сжиматься. Так делают строку поиска: поле растягивается, кнопка остаётся своего размера:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<form class="flex gap-2">
  <input class="flex-1 rounded-lg border border-gray-300 px-3 py-2" placeholder="Поиск товаров">
  <button class="shrink-0 rounded-lg bg-gray-900 px-4 py-2 text-white">Найти</button>
</form>

Перенос

flex-wrap переносит элементы на новую строку, когда им не хватает места. Например, список тегов:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<div class="flex max-w-xs flex-wrap gap-2">
  <span class="rounded-full bg-gray-100 px-3 py-1 text-sm">Bluetooth</span>
  <span class="rounded-full bg-gray-100 px-3 py-1 text-sm">Шумоподавление</span>
  <span class="rounded-full bg-gray-100 px-3 py-1 text-sm">30 часов</span>
  <span class="rounded-full bg-gray-100 px-3 py-1 text-sm">Быстрая зарядка</span>
</div>

Теги, которые не поместились, перешли на следующую строку.

Частая ошибка

Ставить items-center или gap-4 без flex:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<div class="items-center justify-between gap-4">
  <span>$79</span>
  <button>В корзину</button>
</div>

Ничего не выровнялось: классы выравнивания работают только у flex- или grid-контейнера. Первым всегда идёт flex (или grid), затем остальное.

Спасибо, что читаете!