📁 Раздел: Базовые утилиты⏱️ Время изучения: ~45 мин🎯 Сложность: Начальная
⚡ Кратко
Размер — text-*, вес — font-*, интервалы —
leading-* и tracking-*, обрезка — truncate
и line-clamp-*.
Размеры текста
Класс
font-size
Типичное применение
text-xs
0.75rem / 12px
подписи, метки, служебный текст
text-sm
0.875rem / 14px
основной текст интерфейса
text-base
1rem / 16px
текст статьи
text-lg
1.125rem / 18px
крупный абзац, лид
text-xl
1.25rem / 20px
подзаголовок
text-2xl
1.5rem / 24px
заголовок карточки
text-3xl
1.875rem / 30px
заголовок страницы
text-4xl … text-9xl
2.25rem … 8rem
обложки и лендинги
Парная запись размера и интервала: text-3xl/9 — размер 3xl,
line-height из шкалы отступов (9 × 0.25rem).
Начертание и стиль
Класс
CSS
Комментарий
font-normal
400
основной текст
font-medium
500
кнопки, метки
font-semibold
600
заголовки интерфейса
font-bold
700
акценты
italic / not-italic
font-style
цитаты
font-sans / font-mono
font-family
шрифт из темы
uppercase / lowercase / capitalize
text-transform
регистр
antialiased
сглаживание
светлый текст на тёмном фоне
Интервалы
Класс
Значение
Когда
leading-none
1
крупные цифры, числа в карточках
leading-tight
1.25
заголовки
leading-normal
1.5
по умолчанию
leading-relaxed
1.625
длинные тексты
tracking-tighter … tracking-tight
−0.05em … −0.025em
крупные заголовки
tracking-normal
0
обычный текст
tracking-wide … tracking-widest
0.025em … 0.1em
надписи капсом
Выравнивание, обрезка, переносы
Класс
Что делает
text-left / text-center / text-right
выравнивание
text-start / text-end
логическое выравнивание (учитывает направление письма)
truncate
одна строка с многоточием
line-clamp-2 … line-clamp-6
обрезка после N строк
text-balance
ровные по длине строки заголовка
text-pretty
убирает «висящие» слова в абзацах
break-words / break-all
перенос длинных слов и ссылок
whitespace-nowrap
запретить перенос
tabular-nums
моноширинные цифры
underline, decoration-2, underline-offset-4
подчёркивание и его вид
indent-4
красная строка
list-disc, list-decimal, list-inside
маркеры списка (preflight их снимает)
⚠️ Проверить по документации: для длинных
статей из CMS удобен официальный плагин @tailwindcss/typography
с классом prose — он оформляет «сырой» HTML целиком. В этом курсе
плагин не используется; ставится он отдельно.