6. Типографика

Tailwind CSS: Типографика

Типографика — это 90% любого UI. Tailwind даёт полный набор утилит для управления размером, весом, высотой строки, межбуквенным расстоянием и декорациями текста.

Размеры шрифта (font-size)

<p class="text-xs">12px — xs</p>
<p class="text-sm">14px — sm (мелкие подписи)</p>
<p class="text-base">16px — base (базовый размер)</p>
<p class="text-lg">18px — lg</p>
<p class="text-xl">20px — xl</p>
<p class="text-2xl">24px — 2xl (заголовки карточек)</p>
<p class="text-3xl">30px — 3xl</p>
<p class="text-4xl">36px — 4xl (заголовок страницы)</p>
<p class="text-5xl">48px — 5xl (hero)</p>
<p class="text-6xl">60px — 6xl</p>
<p class="text-7xl">72px — 7xl</p>
<p class="text-8xl">96px — 8xl</p>
<p class="text-9xl">128px — 9xl (очень большие заголовки)</p>

Вес шрифта (font-weight)

<p class="font-thin">Thin (100)</p>
<p class="font-extralight">ExtraLight (200)</p>
<p class="font-light">Light (300)</p>
<p class="font-normal">Normal (400) — базовый</p>
<p class="font-medium">Medium (500)</p>
<p class="font-semibold">SemiBold (600)</p>
<p class="font-bold">Bold (700)</p>
<p class="font-extrabold">ExtraBold (800)</p>
<p class="font-black">Black (900)</p>

Высота строки (line-height)

<p class="leading-none">leading-none (1) — строки вплотную</p>
<p class="leading-tight">leading-tight (1.25) — плотный</p>
<p class="leading-snug">leading-snug (1.375)</p>
<p class="leading-normal">leading-normal (1.5) — базовый</p>
<p class="leading-relaxed">leading-relaxed (1.625) — для длинных текстов</p>
<p class="leading-loose">leading-loose (2) — очень свободный</p>

Совет: Для основного текста статей используй leading-relaxed или leading-loose — так читается легче.

Межбуквенное расстояние (letter-spacing)

<p class="tracking-tighter">tracking-tighter (-0.05em)</p>
<p class="tracking-tight">tracking-tight (-0.025em)</p>
<p class="tracking-normal">tracking-normal (0)</p>
<p class="tracking-wide">tracking-wide (0.025em)</p>
<p class="tracking-wider">tracking-wider (0.05em)</p>
<p class="tracking-widest">tracking-widest (0.1em) — для UPPERCASE</p>

Типичное использование:

<!-- Лейблы форм, категории -->
<span class="text-xs uppercase tracking-wider text-gray-500">Категория</span>

Выравнивание текста

<p class="text-left">По левому краю</p>
<p class="text-center">По центру</p>
<p class="text-right">По правому краю</p>
<p class="text-justify">По ширине — растягивает пробелы между словами</p>

Декорации текста

<p class="underline">Подчёркнутый</p>
<p class="line-through">Зачёркнутый</p>
<p class="no-underline">Убрать подчёркивание</p>
<p class="italic">Курсив</p>
<p class="not-italic">Убрать курсив</p>
<p class="uppercase">ЗАГЛАВНЫЕ БУКВЫ</p>
<p class="lowercase">строчные буквы</p>
<p class="capitalize">Каждое Слово С Заглавной</p>
<p class="truncate">Обрезать длинный текст с многоточием если не влезает...</p>

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

<p class="font-sans">Sans-serif (по умолчанию: ui-sans-serif, system-ui)</p>
<p class="font-serif">Serif (ui-serif, Georgia)</p>
<p class="font-mono">Monospace (для кода, ui-monospace)</p>

Для подключения Google Fonts через конфиг:

tailwind.config.js

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter', 'sans-serif'],
        display: ['Playfair Display', 'serif'],
      },
    },
  },
}

Плагин @tailwindcss/typography

Для красивой типографики длинных текстов (статьи, блоги, Markdown):

npm install @tailwindcss/typography

tailwind.config.js

plugins: [require('@tailwindcss/typography')]

<!-- Применяем prose класс -->
<article class="prose prose-lg max-w-none">
  <h1>Заголовок статьи</h1>
  <p>Автоматически красивые стили для всего HTML внутри...</p>
  <ul><li>Списки</li></ul>
  <code>Код</code>
</article>

<!-- Dark mode версия -->
<article class="prose prose-invert">...</article>

Практика