Урок 04. Частые ошибки

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

⚡ Кратко

Дублирование gap и margin, фиксированная ширина вместо максимальной, вертикальный padding у строчных элементов, произвольные значения без нужды.

Ошибка 1. gap и margin одновременно

Как ломается: промежутки получаются вдвое больше задуманного, а у крайних элементов появляется лишний отступ.

❌ Неправильно

<div class="flex gap-4">
  <div class="mr-4">A</div>
  <div class="mr-4">B</div>
</div>

✅ Правильно

<div class="flex gap-4">
  <div>A</div>
  <div>B</div>
</div>

Почему: gap уже решает задачу целиком. Отступы у детей нужны, только когда у них разное расстояние друг от друга.

Ошибка 2. w-* вместо max-w-*

Как ломается: на телефоне блок шире экрана, появляется горизонтальная прокрутка.

❌ Жёсткая ширина

<div class="w-96">Карточка</div>

✅ Ограничение сверху

<div class="w-full max-w-96">Карточка</div>

Почему: w-96 — это ровно 24rem всегда, даже когда экран уже. max-w-* ограничивает, но позволяет сжиматься — это и есть адаптивность по умолчанию.

Ошибка 3. Вертикальный padding у строчного элемента

Как ломается: фон накладывается на соседние строки, высота строки не меняется.

❌ span без display

<span class="bg-amber-200 py-4">Текст</span>

✅ inline-block или flex

<span class="inline-block bg-amber-200 px-2 py-1">Текст</span>

Почему: у строчных элементов вертикальные отступы не влияют на высоту строки — это правило CSS, а не особенность Tailwind.

Ошибка 4. Скобки вместо шкалы

❌ Каждое значение своё

<div class="p-[13px] mt-[7px] gap-[11px]">…</div>

✅ Ближайшие значения шкалы

<div class="p-3 mt-2 gap-3">…</div>

Почему: разница в один-два пикселя не видна, а согласованность сетки — видна сразу. Скобки оставляйте для действительно точных величин.

Ошибка 5. Забытый min-w-0 во flex

Длинный текст внутри flex-элемента отказывается сжиматься и «распирает» раскладку. Лечится классом min-w-0 у гибкого элемента — подробнее в уроке 08 про Flexbox.

Очень длинное название файла, которое не помещается

min-w-0 + truncate

<div class="flex max-w-sm gap-3 rounded-lg border border-slate-200 p-3">
  <div class="size-10 shrink-0 rounded-full bg-slate-300"></div>
  <div class="min-w-0">
    <p class="truncate text-sm font-medium text-slate-900">Очень длинное название файла, которое не помещается</p>
    <p class="text-xs text-slate-500">min-w-0 + truncate</p>
  </div>
</div>