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

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

⚡ Кратко

Рамка без цвета, тень и рамка одновременно, снятый фокус, скругление без overflow-hidden, тени в тёмной теме.

Ошибка 1. Рамка цвета текста

Как ломается: у блока с красным текстом появляется красная рамка, хотя её никто не задавал.

Почему: border задаёт только толщину, а цвет по умолчанию — currentColor. Всегда пишите цвет рядом: border border-slate-200.

Ошибка 2. Рамка и тень вместе «просто на всякий случай»

❌ Спорят друг с другом

<div class="rounded-xl border border-slate-300 shadow-xl">…</div>

✅ Одно средство отделения

<div class="rounded-xl border border-slate-200">…</div>
<div class="rounded-xl shadow-lg">…</div>

Почему: рамка говорит «плоский документ», тень — «объект над поверхностью». Вместе получается ни то ни другое. Исключение — тёмная тема, где к тени часто добавляют тонкую светлую рамку, потому что тень на тёмном фоне не видна.

Ошибка 3. Скругление без обрезки содержимого

Как ломается: картинка или цветная шапка вылезают за скруглённые углы прямоугольником.

без overflow-hidden — углы «квадратные»

с overflow-hidden — всё по форме

<div class="grid gap-4 sm:grid-cols-2">
  <div class="rounded-xl border border-slate-200">
    <div class="h-10 bg-rose-400"></div>
    <p class="p-3 text-xs text-slate-600">без overflow-hidden — углы «квадратные»</p>
  </div>
  <div class="overflow-hidden rounded-xl border border-slate-200">
    <div class="h-10 bg-emerald-400"></div>
    <p class="p-3 text-xs text-slate-600">с overflow-hidden — всё по форме</p>
  </div>
</div>

Ошибка 4. Убрать фокус, потому что «мешает дизайну»

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

Как правильно: focus-visible: плюс собственный контур или кольцо. Правило простое: если убрали — значит, обязаны нарисовать замену.

Ошибка 5. Тени в тёмной теме

На тёмном фоне чёрная тень не видна: элемент выглядит приклеенным. В тёмной теме «высоту» показывают более светлым фоном и тонкой рамкой:

<div class="rounded-xl bg-white shadow-lg
            dark:bg-slate-800 dark:shadow-none dark:ring-1 dark:ring-white/10">
  …
</div>