Типографика (Typography)
Классы для управления текстом.
Размеры текста
| Класс | Описание |
|---|---|
.text-2xs | Очень маленький |
.text-xs | Маленький |
.text-sm | Меньше среднего |
.text-base | Базовый |
.text-lg | Большой |
.text-xl | Очень большой |
.text-2xl | Ещё больше |
Вес текста (Font Weight)
| Класс | Описание |
|---|---|
.font-thin | Очень тонкий (100) |
.font-light | Тонкий (300) |
.font-regular | Обычный (400) |
.font-medium | Средний (500) |
.font-semibold | Полужирный (600) |
.font-bold | Жирный (700) |
.font-extrabold | Очень жирный (800) |
.font-black | Самый жирный (900) |
Цвет текста
Все цвета палитры доступны через .text-{color}-{brightness}:
text-gray-900text-gray-700text-gray-500text-blue-500text-red-500
html
<span class="text-gray-900">Основной текст</span>
<span class="text-gray-500">Вторичный текст</span>
<span class="text-blue-500">Акцентный текст</span>Примеры
Очень маленький тонкий текст
Маленький обычный текст
Базовый средний текст
Большой полужирный текст
Очень большой жирный текст
html
<p class="text-2xs font-light">Очень маленький тонкий текст</p>
<p class="text-base font-medium">Базовый средний текст</p>
<p class="text-xl font-bold">Очень большой жирный текст</p>