Урок 05. Старый vs Новый: своя шкала против встроенной

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

⚡ Кратко

Раньше типографическую шкалу описывали вручную и следили за интервалами сами. Теперь шкала встроена, интервал идёт в паре с размером, а браузерные стили заголовков сброшены preflight-ом.

Своя шкала против встроенной

❌ Было

h1 { font-size: 30px; line-height: 36px; letter-spacing: -0.5px; }
h2 { font-size: 24px; line-height: 32px; }
.lead { font-size: 18px; line-height: 28px; color: #475569; }
.caption { font-size: 12px; color: #94a3b8; }

Каждый новый размер — новое правило и новое согласование с дизайнером.

✅ Стало

Заголовок

Подзаголовок

Лид-абзац

Подпись

<div class="space-y-2">
  <h1 class="text-3xl font-semibold tracking-tight text-slate-900">Заголовок</h1>
  <h2 class="text-2xl font-semibold text-slate-900">Подзаголовок</h2>
  <p class="text-lg text-slate-600">Лид-абзац</p>
  <p class="text-xs text-slate-400">Подпись</p>
</div>

Заголовки после preflight

Preflight обнуляет размер и вес у h1–h6: браузерные значения слишком разные и мешают дизайну. Поэтому заголовок без классов выглядит как обычный текст — это ожидаемое поведение, а не поломка.
<!-- было достаточно тега -->
<h1>Заголовок</h1>

<!-- стало: размер и вес задаются явно -->
<h1 class="text-3xl font-semibold tracking-tight">Заголовок</h1>

Что нового в v4

ВозможностьКомментарий
text-3xl/9размер и межстрочный интервал одним классом
text-balance, text-prettyпереносы строк без «висящих» слов
line-clamp-*в ядре, отдельный плагин не нужен
font-stretch-*ширина начертания для вариативных шрифтов
text-shadow-*тень текста стала утилитой
Шрифт темы--font-sans в @theme вместо theme.fontFamily
 
@theme {
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --text-hero: 4rem;
  --text-hero--line-height: 1.05;
}