Урок 07. Старый vs Новый: переименования теней и колец

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

⚡ Кратко

В v4 шкала теней сдвинулась (shadow-sm стал shadow-xs), кольцо по умолчанию стало 1px вместо 3px, а outline-none разделился на две утилиты.

Рамки: CSS против утилит

❌ Было

.card {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
}
.card__header { border-bottom: 1px solid #e2e8f0; }

✅ Стало

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

Что переименовали в v4

v3	v4	Комментарий
`shadow-sm`	`shadow-xs`	шкала сдвинулась на шаг
`shadow`	`shadow-sm`	безымянный вариант убран
`rounded-sm`	`rounded-xs`	аналогично радиусам
`rounded`	`rounded-sm`	—
`ring` = 3px	`ring` = 1px	для прежнего вида пишите `ring-3`
`outline-none`	`outline-hidden`	сохраняет контур в режиме высокой контрастности
`ring-offset-color` по умолчанию белый	задаётся явно	важно для тёмной темы

Это самая коварная группа переименований при переносе проекта: классы существуют и в v3, и в v4, но означают разное. Интерфейс не сломается с ошибкой — он просто станет выглядеть иначе.

Фокус: как было и как правильно

❌ Убрать и забыть

<button class="outline-none">Кнопка</button>

✅ Заменить своим

<button class="rounded-md bg-slate-900 px-4 py-2 text-sm text-white
               focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sky-500">
  Нажмите Tab, чтобы увидеть фокус
</button>

focus-visible показывает контур только при навигации с клавиатуры — мышью кнопка остаётся чистой. Это современная замена приёму «убрать outline, потому что некрасиво».