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

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

⚡ Кратко

Слишком много уровней иерархии, обрезка без ограничения ширины, серый текст на грани читаемости, капс без трекинга.

Ошибка 1. truncate без ограничения ширины

Как ломается: многоточия нет, блок просто растягивается и ломает раскладку.

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

<div class="flex gap-3">
  <p class="truncate">Очень длинный текст…</p>
</div>

✅ Правильно

<div class="flex gap-3">
  <p class="min-w-0 truncate">Очень длинный текст…</p>
</div>

Почему: по умолчанию flex-элемент не может стать уже своего содержимого. min-w-0 снимает это ограничение.

Ошибка 2. Пять размеров там, где хватит трёх

Как ломается: текст выглядит «пёстро», читатель не понимает, что важнее.

Рабочий набор для интерфейса: text-xs (служебное), text-sm (основное), text-lg/text-2xl (заголовки). Всё остальное — по необходимости, а не «для разнообразия».

Ошибка 3. Нечитаемый серый

Как ломается: текст text-slate-400 на белом фоне не проходит по контрасту и исчезает на солнце.

text-slate-400 — контраст ниже нормы для основного текста

text-slate-600 — безопасный вторичный текст

text-slate-900 — основной текст

<div class="space-y-2">
  <p class="text-sm text-slate-400">text-slate-400 — контраст ниже нормы для основного текста</p>
  <p class="text-sm text-slate-600">text-slate-600 — безопасный вторичный текст</p>
  <p class="text-sm text-slate-900">text-slate-900 — основной текст</p>
</div>

Правило: для основного текста берите ступень 700–900, для вторичного — 500–600. Ступени 300–400 — только для декоративных подписей крупным размером.

Ошибка 4. Капс без трекинга

❌ Плотно

<p class="text-xs uppercase">Категория</p>

✅ С разрядкой

<p class="text-xs uppercase tracking-widest">Категория</p>

Почему: прописные буквы одинаковой высоты сливаются; разрядка возвращает им ритм.

Ошибка 5. Заголовок без tracking-tight

Крупные заголовки почти всегда выигрывают от tracking-tight: по умолчанию буквы рассчитаны на текстовый размер и на 30–48px выглядят разреженными. Сравните два варианта в разделе «Теория».