kostyl.dev
Tailwind

Типографіка та система кольорів у Tailwind v4

Повна типографічна система Tailwind v4: шрифти, масштаб, line-height, prose плагін. Кольорова палітра OKLCH, opacity modifiers, кастомні кольори та дизайн-токени. Text-wrap balance/pretty та контент-утиліти.

Типографіка та система кольорів у Tailwind v4

Навіщо окрема стаття про типографіку і кольори?

Типографіка та кольори — не просто "як виглядає текст і фон". Це мова, якою ваш UI спілкується з користувачем. Ієрархія заголовків, правильні відступи між рядками, узгоджена кольорова система — все це разом або creates trust and clarity, або руйнує.

Tailwind v4 суттєво оновив обидві системи: перехід на OKLCH-кольори і нові типографічні утиліти (text-balance, text-pretty) дають інструменти, що раніше вимагали JavaScript або складного CSS.

Кольорова система Tailwind v4

Стандартна палітра

Tailwind включає 22 колірних шкали, кожна від 50 (дуже світлий) до 950 (майже чорний):

ГрупаКольори
Нейтральніslate, gray, zinc, neutral, stone
Тепліred, orange, amber, yellow
Природніlime, green, emerald, teal
Холодніcyan, sky, blue, indigo
Фіолетові/Рожевіviolet, purple, fuchsia, pink, rose
<!-- Приклад відтінків slate: від 50 до 950 -->
<div class="bg-slate-50">
    <!-- майже білий -->
    <div class="bg-slate-100">
        <div class="bg-slate-200">
            <div class="bg-slate-300">
                <div class="bg-slate-400">
                    <div class="bg-slate-500">
                        <!-- середній -->
                        <div class="bg-slate-600">
                            <div class="bg-slate-700">
                                <div class="bg-slate-800">
                                    <div class="bg-slate-900">
                                        <div class="bg-slate-950"><!-- майже чорний --></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

OKLCH: чому це важливо практично

У v4 кожен колір палітри визначений через OKLCH. Що це означає для вас:

1. Кращий контраст. OKLCH забезпечує однакову "відстань" між відтінками. blue-500 та indigo-500 мають однаковий рівень яскравості — і текст на них буде однаково читабельним.

2. Точне затемнення/освітлення. Додайте darker: oklch(from var(--color-brand-500) calc(l * 0.85) c h) — і отримаєте точно темніший відтінок без зсуву кольору.

3. P3 кольори. На сучасних дисплеях Apple та Samsung OKLCH-кольори виглядають яскравіше — браузери автоматично використовують розширений колірний охват.

Opacity modifier /

Найелегантніша деталь кольорової системи — opacity прямо у назві класу:

<!-- Фон -->
<div class="bg-blue-500/100">
    <!-- повністю непрозорий -->
    <div class="bg-blue-500/75">
        <!-- 75% -->
        <div class="bg-blue-500/50">
            <!-- 50% — напівпрозорий -->
            <div class="bg-blue-500/25">
                <!-- 25% -->
                <div class="bg-blue-500/10">
                    <!-- 10% — ледве помітний тінт -->
                    <div class="bg-blue-500/0">
                        <!-- повністю прозорий -->

                        <!-- Текст -->
                        <p class="text-slate-900/80">
                            <!-- трохи приглушений текст -->

                            <!-- Рамка -->
                        </p>

                        <div class="border border-white/20">
                            <!-- тонка напівпрозора рамка -->

                            <!-- Ring -->
                            <input class="focus:ring-2 focus:ring-indigo-500/30" />
                            <!-- м'яка focus ring -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
Preview
×
🔒localhost:3000

Типографічна система

Система font-size

У Tailwind кожен text-{size} задає і font-size, і вбудований line-height — щоб не думати про відступи між рядками окремо:

Класfont-sizeline-heightКоли використовувати
text-xs12px16pxCaption, labels, badges
text-sm14px20pxSecondary text, descriptions
text-base16px24pxBody text (default)
text-lg18px28pxLead paragraph
text-xl20px28pxSub-heading
text-2xl24px32pxSection heading
text-3xl30px36pxPage section title
text-4xl36px40pxHero subtitle
text-5xl48px1 (= font-size)Hero title
text-6xl60px1Display
text-7xl72px1Large display
text-8xl96px1XL display
text-9xl128px1XXL display
<!-- Ієрархія заголовків -->
<h1 class="text-4xl font-black tracking-tight">Головний заголовок</h1>
<h2 class="text-2xl font-bold">Підзаголовок секції</h2>
<h3 class="text-xl font-semibold">Підсекція</h3>
<p class="text-base text-slate-600 leading-relaxed">Основний текст</p>
<span class="text-sm text-slate-400">Примітка або коментар</span>
<span class="text-xs uppercase tracking-widest text-slate-400 font-semibold">Label</span>

Перевизначення line-height

Якщо дефолтний line-height не підходить — явне перевизначення:

<!-- Нейтральний лінійний -->
<p class="text-lg leading-none"><!-- line-height: 1 --></p>
<p class="text-base leading-tight"><!-- line-height: 1.25 --></p>
<p class="text-base leading-snug"><!-- line-height: 1.375 --></p>
<p class="text-base leading-normal"><!-- line-height: 1.5 (default text-base) --></p>
<p class="text-base leading-relaxed"><!-- line-height: 1.625 — для длинных текстів! --></p>
<p class="text-base leading-loose">
    <!-- line-height: 2 -->

    <!-- Числові значення -->
</p>

<p class="leading-6"><!-- line-height: 1.5rem (24px) --></p>
<p class="leading-7"><!-- line-height: 1.75rem (28px) --></p>
<p class="leading-8"><!-- line-height: 2rem (32px) --></p>
Для довгого читабельного тексту: text-base leading-relaxed або text-lg leading-relaxed. Це золотий стандарт для статей та документації.

Font Weight: від ultra-thin до ultra-black

<p class="font-thin">100 — Ultra Thin</p>
<p class="font-extralight">200 — Extra Light</p>
<p class="font-light">300 — Light</p>
<p class="font-normal">400 — Normal (Regular)</p>
<p class="font-medium">500 — Medium</p>
<p class="font-semibold">600 — Semi Bold</p>
<p class="font-bold">700 — Bold</p>
<p class="font-extrabold">800 — Extra Bold</p>
<p class="font-black">900 — Black</p>

Порада: не всі шрифти мають всі ваги. Google Fonts — завантажуйте тільки потрібні вертаментами у @import. Системні шрифти зазвичай мають 400 та 700.

Letter Spacing та Text Transform

<!-- Tracking (letter-spacing): для заголовків або label-->
<h1 class="tracking-tighter">
    <!-- -0.05em — компактний заголовок -->
    <h1 class="tracking-tight">
        <!-- -0.025em — щільний заголовок -->
        <h1 class="tracking-normal">
            <!-- 0 — стандарт -->
            <p class="tracking-wide">
                <!-- 0.025em -->
                <span class="tracking-wider">
                    <!-- 0.05em -->
                    <span class="text-xs uppercase tracking-widest font-semibold">
                        <!-- 0.1em — label/caption стиль -->

                        <!-- Transform -->
                        <p class="uppercase">ВЕЛИКІ ЛІТЕРИ</p>
                        <p class="lowercase">малі літери</p>
                        <p class="capitalize">Перша Велика Кожного Слова</p>
                        <p class="normal-case">нормальний регістр</p></span
                    ></span
                >
            </p>
        </h1>
    </h1>
</h1>

Text Balance та Text Pretty (НОВА v4)

Два нових класи вирішують давній дизайнерський біль — нерівно розбиті рядки:

<!-- text-balance: рівномірний розподіл слів між рядками заголовка -->
<h2 class="text-balance text-2xl font-bold max-w-xl">
    Довгий заголовок що краще виглядає розбитим рівномірно а не нерівно
</h2>

<!-- text-pretty: запобігає "orphan" — одиноке слово на останньому рядку -->
<p class="text-pretty text-slate-600 leading-relaxed">
    Нудно коли останній рядок параграфу має тільки одне слово. text-pretty вирішує це через алгоритм правильного
    перенесення.
</p>
Preview
×
🔒localhost:3000

Text Decoration та Font Style

<!-- Підкреслення -->
<a class="underline">Звичайне</a>
<a class="underline underline-offset-2">Зміщення 2px</a>
<a class="underline underline-offset-4 decoration-indigo-500">Кольорове</a>
<a class="underline decoration-2">Товщина 2px</a>
<a class="underline decoration-dotted">Крапкове</a>
<a class="underline decoration-wavy">Хвилясте</a>
<p class="line-through">Викреслений текст</p>
<p class="no-underline">Без підкреслення</p>

<!-- Font Style -->
<p class="italic">Курсив</p>
<p class="not-italic">Прибрати курсив</p>

Truncate та Line Clamp

<!-- Обрізати в один рядок (три крапки в кінці) -->
<p class="truncate w-48">Довгий текст, що не влазить і буде обрізаний із крапками</p>

<!-- Обрізати після N рядків (line-clamp) — дуже корисно для карток -->
<p class="line-clamp-1">Один рядок</p>
<p class="line-clamp-2">Два рядки максимум, все зайве обрізається...</p>
<p class="line-clamp-3">Три рядки</p>
<p class="line-clamp-none">Скасувати line-clamp</p>

Font Family

<!-- Системний sans-serif -->
<p class="font-sans">system-ui, -apple-system, sans-serif</p>

<!-- Системний serif -->
<p class="font-serif">Georgia, Cambria, serif</p>

<!-- Системний mono -->
<code class="font-mono">ui-monospace, Menlo, Monaco, Courier, monospace</code>

Кастомні шрифти — через @theme:

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
@import 'tailwindcss';

@theme {
    --font-sans: 'Inter', system-ui, sans-serif;
    --font-display: 'Cabinet Grotesk', 'Inter', sans-serif;
}

<h1 class="font-display font-black">Заголовок на Cabinet Grotesk</h1>
<p class="font-sans">Текст на Inter</p>

@tailwindcss/typography плагін: prose

Коли у вас є markdown або HTML-контент — стилізувати кожен тег вручну через Tailwind занадто громіздко. Для цього є @tailwindcss/typography плагін з класом prose.

Встановлення

npm install @tailwindcss/typography

/* main.css */
@import 'tailwindcss';
@import '@tailwindcss/typography'; /* або через @plugin */

Базове використання

<!-- Один клас prose — і весь HTML-контент виглядає чудово -->
<article class="prose">
    <h1>Заголовок статті</h1>
    <p>Перший параграф з <strong>жирним</strong> текстом і <a href="#">посиланням</a>.</p>
    <ul>
        <li>Пункт один</li>
        <li>Пункт два</li>
    </ul>
    <pre><code>const x = 1;</code></pre>
    <blockquote>Цитата автора</blockquote>
</article>

prose стилізує: h1-h6, p, a, ul/ol/li, blockquote, code, pre, hr, table — все автоматично.

Розміри prose

<article class="prose prose-sm">
    <!-- Компактний -->
    <article class="prose">
        <!-- Стандартний (base) -->
        <article class="prose prose-lg">
            <!-- Великий -->
            <article class="prose prose-xl">
                <!-- Дуже великий -->
                <article class="prose prose-2xl"><!-- Максимальний --></article>
            </article>
        </article>
    </article>
</article>

Dark mode для prose

<article class="prose dark:prose-invert">
    <!-- Автоматично адаптується до темної теми -->
</article>

Кастомізація prose

<!-- Колір посилань через prose-{color} -->
<article class="prose prose-indigo">
    <article class="prose prose-slate">
        <!-- Поєднання -->
        <article class="prose prose-lg prose-indigo dark:prose-invert max-w-2xl mx-auto"></article>
    </article>
</article>

Практичні типографічні патерни

Статус-типографіка: мітки та badges

<!-- Category label: UPPERCASE + tracking-widest + маленький -->
<span class="text-xs font-bold uppercase tracking-widest text-indigo-600"> Технології </span>

<!-- Reading time -->
<span class="text-xs text-slate-400 font-medium"> · 5 хв читання </span>

<!-- Date -->
<time class="text-sm text-slate-500" datetime="2025-03-11"> 11 березня 2025 </time>

Hero типографіка

<section class="text-center px-4">
    <!-- Eyebrow text — маленький підзаголовок над заголовком -->
    <p class="text-sm font-bold uppercase tracking-widest text-indigo-500 mb-3">Нові можливості</p>
    <!-- Основний заголовок: баланс + tight tracking -->
    <h1 class="text-5xl md:text-6xl font-black tracking-tight text-balance mx-auto max-w-2xl">
        Tailwind CSS v4 — майбутнє вже тут
    </h1>
    <!-- Lead paragraph -->
    <p class="text-lg md:text-xl text-slate-600 leading-relaxed text-pretty max-w-xl mx-auto mt-4">
        CSS-first конфігурація, OKLCH кольори та Lightning CSS engine. Менше конфігурації, більше можливостей.
    </p>
</section>

Завдання для самоперевірки

Попередня стаття: Варіанти: hover, focus та нові v4Наступна стаття: Компоненти: @apply, @utility та патерни

Варіанти: hover, focus, responsive, dark mode та нові v4

Система варіантів Tailwind CSS v4: стани взаємодії, structural pseudo-classes, group та peer, нові варіанти has-*, not-*, nth-*, starting:, адаптивні breakpoints та dark mode.

Компоненти та повторюваність: @apply, @utility та патерни

Вирішення проблеми повторюваності в Tailwind: @apply для виняткових випадків, @utility для кастомних утиліт v4, @layer components для компонентних класів. Реальні компоненти: Button, Input, Card без JS-фреймворку.

Copyright © 2026