Урок 04. Старый vs Новый: margin-хаки против gap

📁 Раздел: Базовые утилиты ⏱️ Время изучения: ~50 мин 🎯 Сложность: Начальная

⚡ Кратко

Вместо десятка правил с margin — один gap у родителя. Из v3 переехало почти всё, но появились size-*, логические ps/pe и единицы svh/lvh/dvh.

Отступы: CSS против утилит

❌ Классический способ: margin у каждого ребёнка

.list > * + * { margin-top: 12px; }
.list__item { padding: 12px 16px; }
.list__item:last-child { margin-bottom: 0; }

✅ Утилиты: промежуток описан у родителя

  • Первый
  • Второй
  • Третий
<ul class="flex flex-col gap-3">
  <li class="rounded border border-slate-200 px-4 py-3 text-sm">Первый</li>
  <li class="rounded border border-slate-200 px-4 py-3 text-sm">Второй</li>
  <li class="rounded border border-slate-200 px-4 py-3 text-sm">Третий</li>
</ul>

Что изменилось внутри Tailwind

ПриёмРаньшеСейчас
Квадратный элементw-10 h-10size-10
Отступ по стороне строкиpl-4ps-4 (учитывает направление письма)
Высота экранаmin-h-screenmin-h-svh — без скачков на мобильных
Промежутки между блокамиspace-y-4flex flex-col gap-4
Настройка шкалыtheme.spacing в конфиге--spacing и --spacing-* в @theme
space-y-* никуда не делся и остаётся удобным для текста в CMS-контенте, где родителя не поменять. Но в новых компонентах gap предпочтительнее: он не создаёт «висящих» margin и корректно работает при переносе строк.

Единицы высоты вьюпорта

КлассЕдиницаПоведение на мобильных
min-h-screen100vhне учитывает панель браузера — контент «прыгает»
min-h-svh100svhминимальная видимая высота, самый безопасный вариант
min-h-lvh100lvhмаксимальная высота, панель скрыта
min-h-dvh100dvhдинамическая: меняется при прокрутке