Текст и шрифты

Утилиты для текста задают размер, жирность, шрифт, интервалы и выравнивание. После Preflight у текста нет никакого оформления, поэтому эти классы встречаются в каждой вёрстке.

Размер

Размер задают классы text- со словом-ступенью:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<p class="text-sm">text-sm — 14px</p>
<p class="text-base">text-base — 16px</p>
<p class="text-xl">text-xl — 20px</p>
<p class="text-3xl">text-3xl — 30px</p>

Строки растут сверху вниз. Ступени: xs, sm, base, lg, xl, 2xl и дальше до 9xl. Каждый класс задаёт и подходящий межстрочный интервал.

Жирность и начертание

Семейство шрифта

Три готовых семейства: font-sans — без засечек, font-serif — с засечками, font-mono — моноширинный. Свой шрифт добавляют через тему — это урок про @theme.

Интервалы и выравнивание

leading- задаёт межстрочный интервал, tracking- — расстояние между буквами, text-left, text-center, text-right — выравнивание. Размер и интервал можно указать вместе через косую черту: text-lg/7 — размер lg и высота строки 7 шагов шкалы.

Соберём текстовую часть карточки товара:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<div class="w-72">
  <p class="text-xs font-semibold tracking-wide text-indigo-600 uppercase">Аудио</p>
  <h2 class="mt-1 text-lg font-semibold text-gray-900">Беспроводные наушники</h2>
  <p class="mt-2 text-sm/6 text-gray-600">Активное шумоподавление и до 30 часов работы от одной зарядки.</p>
  <p class="mt-3 text-2xl font-bold text-gray-900">$79</p>
</div>

Мелкая заглавная категория, крупное название, серое описание и заметная цена — разница в размере, весе и цвете выстраивает порядок чтения.

Длинный текст

Название товара бывает слишком длинным для карточки. truncate обрезает текст в одну строку и ставит многоточие, а line-clamp-2 оставляет две строки:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<p class="w-56 truncate">Беспроводные наушники с активным шумоподавлением</p>
<p class="mt-3 w-56 line-clamp-2">Беспроводные наушники с активным шумоподавлением и прозрачным режимом</p>

Первая строка обрывается многоточием, второй абзац — после второй строки.

Частая ошибка

Путать text- для размера и для цвета и ставить два размера сразу:

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
 
<p class="text-lg text-2xl">Какой размер?</p>

Порядок классов в атрибуте ни на что не влияет: побеждает тот, что стоит позже в сгенерированном CSS, а не в разметке. На элементе должен быть один класс размера и один класс цвета — text-2xl text-gray-900.