Tailwind

Layout: Flexbox та Grid через Tailwind

Майстерня Layout в Tailwind CSS: повний Flexbox та Grid через utility-класи. Типові layout-патерни: Holy Grail, Card Grid, Sidebar, Sticky Footer. Subgrid та практичні приклади.

Layout: Flexbox та Grid через Tailwind

Чому Layout — серце будь-якого UI

Перш ніж кнопки, кольори, анімації — є Layout. Де розташовані елементи? Як вони адаптуються до розміру екрану? Як вирівняні заголовок, контент і футер?

У чистому CSS Layout вимагає розуміння bagатьох концепцій: display, position, flex, grid, float (вже ні), clearfix (вже ні). Tailwind перетворює ці концепції на передбачуваний набір класів. Але автоматизує лише синтаксис — розуміти Flexbox і Grid все одно потрібно.

Ця стаття — не "як вивчити Flexbox". Ця стаття — "як Flexbox і Grid виглядають у Tailwind і як вирішити типові задачі Layout".

Якщо ви не знайомі з Flexbox та Grid — спочатку прочитайте відповідні статті в розділі про CSS. Tailwind — це синтаксис поверх CSS-концепцій, а не їх заміна.

Flexbox у Tailwind

Активація Flexbox

<div class="flex">
    <!-- display: flex -->
    <div class="inline-flex"> <!-- display: inline-flex (не займає всю ширину) --></div>
</div>

Одним класом ви перетворюєте контейнер на flex-контейнер. Усі прямі дочірні елементи стають flex-items.

Основна вісь: `flex-direction`

<div class="flex flex-row">
    <!-- Рядок ліворуч→праворуч (за замовчуванням) -->
    <div class="flex flex-row-reverse">
        <!-- Рядок праворуч→ліворуч -->
        <div class="flex flex-col">
            <!-- Колонка зверху→вниз -->
            <div class="flex flex-col-reverse"><!-- Колонка знизу→вгору --></div>
        </div>
    </div>
</div>

flex-col — один з найуживаніших класів: картки, форми, sidebar — все будується у стовпець.

Вирівнювання по головній осі: `justify-content`

При flex-row головна вісь — горизонтальна. При flex-col — вертикальна.

<div class="flex justify-start">
    <!-- На початку (default) -->
    <div class="flex justify-center">
        <!-- По центру -->
        <div class="flex justify-end">
            <!-- В кінці -->
            <div class="flex justify-between">
                <!-- Рівномірно, крайні впритул до меж -->
                <div class="flex justify-around">
                    <!-- Рівномірно, crайні з відступом = ½ від між-елементних -->
                    <div class="flex justify-evenly"><!-- Однаковий відступ між усіма та краями --></div>
                </div>
            </div>
        </div>
    </div>
</div>

Вирівнювання по перехресній осі: `align-items`

<div class="flex items-start">
    <!-- Вершина контейнера -->
    <div class="flex items-center">
        <!-- Центр → найуживаніший! -->
        <div class="flex items-end">
            <!-- Дно -->
            <div class="flex items-stretch">
                <!-- Розтягнути до висоти контейнера (default) -->
                <div class="flex items-baseline"><!-- По базовій лінії тексту --></div>
            </div>
        </div>
    </div>
</div>

items-center → вирівняти вертикально по центру — мабуть, найчастіший Flexbox-запит.

Перенесення: `flex-wrap`

<div class="flex flex-nowrap">
    <!-- Не переносити (default) — може виїжджати за межі -->
    <div class="flex flex-wrap">
        <!-- Переносити на новий рядок -->
        <div class="flex flex-wrap-reverse"><!-- Переносити в зворотному порядку --></div>
    </div>
</div>

Gap між елементами

<div class="flex gap-4">
    <!-- gap: 1rem між усіма -->
    <div class="flex gap-x-6 gap-y-3"><!-- різний horizontal/vertical gap --></div>
</div>

Flex-items: поведінка дочірніх

<!-- flex-grow: чи розтягується елемент, щоб зайняти вільний простір -->
<div class="flex-1">
    <!-- flex: 1 1 0% — рівний розподіл простору -->
    <div class="grow">
        <!-- flex-grow: 1 — росте, але не скорочується -->
        <div class="grow-0">
            <!-- flex-grow: 0 — не росте -->

            <!-- flex-shrink: чи скорочується при нестачі місця -->
            <div class="shrink">
                <!-- flex-shrink: 1 (default) -->
                <div class="shrink-0">
                    <!-- flex-shrink: 0 — НЕ скорочується → для фіксованих колонок -->

                    <!-- flex-basis: початковий розмір -->
                    <div class="basis-1/3">
                        <!-- flex-basis: 33.333% -->
                        <div class="basis-64">
                            <!-- flex-basis: 16rem -->
                            <div class="basis-auto">
                                <!-- flex-basis: auto -->

                                <!-- flex shorthand -->
                                <div class="flex-auto">
                                    <!-- flex: 1 1 auto -->
                                    <div class="flex-none"><!-- flex: none (фіксований, не grow/shrink) --></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Order та Align Self

<div class="order-first">
    <!-- order: -9999 (першим) -->
    <div class="order-last">
        <!-- order: 9999 (останнім) -->
        <div class="order-2">
            <!-- order: 2 -->

            <div class="self-start">
                <!-- align-self: flex-start -->
                <div class="self-center">
                    <!-- align-self: center -->
                    <div class="self-end">
                        <!-- align-self: flex-end -->
                        <div class="self-stretch"><!-- align-self: stretch --></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Типові Flexbox-патерни

Патерн 1: Navbar

Класика — лого ліворуч, навігація по центру або праворуч:

Preview

🔒localhost:3000

<nav
    class="flex items-center justify-between px-6 py-4 bg-white border-b border-gray-200 shadow-sm"
    style="font-family: system-ui, sans-serif;"
>
    <!-- Лого -->
    <a href="#" class="flex items-center gap-2 font-black text-slate-900 text-lg">
        <span class="size-8 bg-indigo-600 rounded-lg flex items-center justify-center text-white text-sm">T</span>
        Tailwind
    </a>

    <!-- Навігація -->
    <ul class="hidden md:flex items-center gap-1 list-none m-0 p-0">
        <li>
            <a
                href="#"
                class="px-3 py-2 text-sm font-medium text-slate-600 hover:text-slate-900 hover:bg-slate-100 rounded-lg transition-colors"
                >Документація</a
            >
        </li>
        <li>
            <a
                href="#"
                class="px-3 py-2 text-sm font-medium text-slate-600 hover:text-slate-900 hover:bg-slate-100 rounded-lg transition-colors"
                >Компоненти</a
            >
        </li>
        <li><a href="#" class="px-3 py-2 text-sm font-medium text-indigo-600 bg-indigo-50 rounded-lg">Активна</a></li>
    </ul>

    <!-- CTA -->
    <div class="flex items-center gap-3">
        <button class="hidden sm:block text-sm font-medium text-slate-600 hover:text-slate-900">Увійти</button>
        <button
            class="px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-semibold rounded-lg transition-colors"
        >
            Почати
        </button>
    </div>
</nav>

Ключові класи: justify-between — розсунути лого і CTA по краях; items-center — вирівняти вертикально; gap-3 — відступи між кнопками.

Патерн 2: Картка з footer завжди внизу

Типова задача — картки різної висоти, але кнопки на одному рівні:

Preview

🔒localhost:3000

<div class="flex gap-4 p-6 bg-slate-100" style="font-family: system-ui, sans-serif; min-height: 250px;">
    <!-- Без flex-col — footer не "тягнеться" -->
    <div class="bg-white rounded-xl border border-slate-200 p-5 w-48">
        <h3 class="font-bold text-slate-800 text-sm">Без flex-col</h3>
        <p class="text-xs text-slate-500 mt-2">Короткий опис.</p>
        <button class="mt-3 px-3 py-1.5 bg-indigo-600 text-white text-xs rounded-lg">Дія</button>
    </div>

    <!-- З flex-col + grow на контенті — footer завжди внизу -->
    <div class="bg-white rounded-xl border border-indigo-300 ring-1 ring-indigo-300 p-5 w-48 flex flex-col">
        <h3 class="font-bold text-slate-800 text-sm">З flex-col</h3>
        <p class="text-xs text-slate-500 mt-2 grow">
            Довший опис картки. Він займає більше місця і "виштовхує" кнопку вниз. Ось як це працює.
        </p>
        <button class="mt-3 px-3 py-1.5 bg-indigo-600 text-white text-xs rounded-lg">Дія</button>
    </div>

    <div class="bg-white rounded-xl border border-indigo-300 ring-1 ring-indigo-300 p-5 w-48 flex flex-col">
        <h3 class="font-bold text-slate-800 text-sm">Також flex-col</h3>
        <p class="text-xs text-slate-500 mt-2 grow">Короткий.</p>
        <button class="mt-3 px-3 py-1.5 bg-indigo-600 text-white text-xs rounded-lg">Дія</button>
    </div>
</div>

flex flex-col на картці + grow на секції контенту — класичне рішення для "sticky footer" всередині картки.

Grid у Tailwind

Активація Grid

<div class="grid">
    <!-- display: grid -->
    <div class="inline-grid"> <!-- display: inline-grid --></div>
</div>

Колонки: `grid-cols-{n}`

<div class="grid grid-cols-1">
    <!-- 1 колонка -->
    <div class="grid grid-cols-2">
        <!-- 2 рівні колонки -->
        <div class="grid grid-cols-3">
            <!-- 3 рівні колонки -->
            <div class="grid grid-cols-4">
                <!-- 4 рівні колонки -->
                <div class="grid grid-cols-12"><!-- 12-колонна сітка (Bootstrap-стиль) --></div>
            </div>
        </div>
    </div>
</div>

Все, що не влізає — переноситься на новий рядок автоматично.

Gap у Grid

<div class="grid grid-cols-3 gap-4">
    <!-- 1rem між усіма комірками -->
    <div class="grid grid-cols-3 gap-x-6 gap-y-4"><!-- різний horizontal/vertical --></div>
</div>

Span — розтягнути елемент на кілька колонок/рядків

<!-- Колонки -->
<div class="col-span-2">
    <!-- займає 2 колонки -->
    <div class="col-span-3">
        <!-- займає 3 колонки  -->
        <div class="col-span-full">
            <!-- займає всю ширину сітки -->

            <!-- Рядки -->
            <div class="row-span-2">
                <!-- займає 2 рядки -->
                <div class="row-span-3"></div>
            </div>
        </div>
    </div>
</div>

Позиціонування в сітці

<!-- Явне розміщення -->
<div class="col-start-2">
    <!-- починається з колонки 2 -->
    <div class="col-start-1 col-end-3">
        <!-- від колонки 1 до 3 -->
        <div class="row-start-2 row-end-4"></div>
    </div>
</div>

Auto-fit та Auto-fill через Arbitrary

Для адаптивних сіток, де кількість колонок визначається доступним простором:

<!-- Мінімум 200px на колонку — скільки влізе -->
<div class="grid grid-cols-[repeat(auto-fill,minmax(200px,1fr))] gap-4"></div>

Це arbitrary value — про них детально у окремій статті.

Rows: адаптивна висота рядків

<div class="grid grid-rows-3">
    <!-- 3 рядки рівної висоти -->
    <div class="grid auto-rows-fr">
        <!-- кожен рядок займає рівну частку -->
        <div class="grid auto-rows-min"><!-- рядки за мінімальним contento  --></div>
    </div>
</div>

Subgrid: CSS Subgrid у Tailwind v4

Subgrid — вкладений grid успадковує треки батька. Це вирівнює елементи між картками:

<div class="grid grid-cols-3 gap-6">
    <!-- Без subgrid: кожна картка має власну grid -->
    <div class="grid grid-rows-[auto_1fr_auto] gap-0 bg-white rounded-xl p-5">
        <h3>Заголовок</h3>
        <p class="text-sm mt-2">Varied content length</p>
        <button>Дія</button>
    </div>

    <!-- З CSS Subgrid: row: span 3 + grid-template-rows: subgrid -->
    <div class="grid row-span-3 [grid-template-rows:subgrid] bg-white rounded-xl p-5">
        <h3>Заголовок</h3>
        <p class="text-sm">Будь-яка довжина — кнопки вирівняні!</p>
        <button>Дія</button>
    </div>
</div>

У Tailwind v4: grid-cols-subgrid і grid-rows-subgrid — власні утиліти для subgrid:

<div class="grid grid-cols-3">
    <div class="grid grid-cols-subgrid col-span-3">
        <!-- Успадковує колонки батька -->
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</div>

Типові Grid-патерни

Патерн: Card Grid з адаптивністю

Preview

🔒localhost:3000

<div class="p-6 bg-slate-50" style="font-family: system-ui, sans-serif;">
    <h2 class="text-lg font-bold text-slate-800 mb-4">Сітка карток (grid-cols-1 → md:grid-cols-3)</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
        <div
            class="bg-white rounded-xl p-5 border border-slate-200 hover:shadow-md hover:-translate-y-0.5 transition-all"
        >
            <div class="text-2xl mb-3">🎨</div>
            <h3 class="font-bold text-slate-800">Дизайн</h3>
            <p class="text-sm text-slate-500 mt-2 leading-relaxed">Компоненти та дизайн-системи для сучасного UI.</p>
            <a
                href="#"
                class="inline-flex items-center gap-1 text-indigo-600 text-sm font-semibold mt-4 hover:gap-2 transition-all"
            >
                Детальніше →
            </a>
        </div>
        <div
            class="bg-white rounded-xl p-5 border border-slate-200 hover:shadow-md hover:-translate-y-0.5 transition-all"
        >
            <div class="text-2xl mb-3">⚡</div>
            <h3 class="font-bold text-slate-800">Продуктивність</h3>
            <p class="text-sm text-slate-500 mt-2 leading-relaxed">Оптимізація та швидкість веб-застосунків.</p>
            <a
                href="#"
                class="inline-flex items-center gap-1 text-indigo-600 text-sm font-semibold mt-4 hover:gap-2 transition-all"
            >
                Детальніше →
            </a>
        </div>
        <div
            class="bg-white rounded-xl p-5 border border-slate-200 hover:shadow-md hover:-translate-y-0.5 transition-all"
        >
            <div class="text-2xl mb-3">🔒</div>
            <h3 class="font-bold text-slate-800">Безпека</h3>
            <p class="text-sm text-slate-500 mt-2 leading-relaxed">Захист даних та автентифікація.</p>
            <a
                href="#"
                class="inline-flex items-center gap-1 text-indigo-600 text-sm font-semibold mt-4 hover:gap-2 transition-all"
            >
                Детальніше →
            </a>
        </div>
        <div
            class="bg-white rounded-xl p-5 border border-slate-200 hover:shadow-md hover:-translate-y-0.5 transition-all"
        >
            <div class="text-2xl mb-3">📊</div>
            <h3 class="font-bold text-slate-800">Аналітика</h3>
            <p class="text-sm text-slate-500 mt-2 leading-relaxed">Метрики та звітність у реальному часі.</p>
            <a
                href="#"
                class="inline-flex items-center gap-1 text-indigo-600 text-sm font-semibold mt-4 hover:gap-2 transition-all"
            >
                Детальніше →
            </a>
        </div>
        <div
            class="sm:col-span-2 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-xl p-5 text-white hover:shadow-md hover:-translate-y-0.5 transition-all"
        >
            <div class="text-2xl mb-3">🚀</div>
            <h3 class="font-bold">Featured: Tailwind v4</h3>
            <p class="text-sm text-indigo-100 mt-2 leading-relaxed">
                Повністю переписаний фреймворк. CSS-first конфігурація, OKLCH кольори, Lighting CSS engine.
            </p>
            <a
                href="#"
                class="inline-flex items-center gap-1 text-white text-sm font-semibold mt-4 underline underline-offset-2 hover:gap-2 transition-all"
            >
                Дізнатись більше →
            </a>
        </div>
    </div>
</div>

Патерн: Holy Grail Layout (Header + Sidebar + Main + Footer)

Preview

🔒localhost:3000

<div
    class="min-h-[400px] grid grid-rows-[auto_1fr_auto] bg-slate-100 rounded-xl overflow-hidden border border-slate-200"
    style="font-family: system-ui, sans-serif;"
>
    <!-- Header: повна ширина -->
    <header class="bg-indigo-600 text-white px-6 py-3 flex items-center justify-between">
        <span class="font-bold">🌐 Мій Сайт</span>
        <nav class="flex gap-4 text-sm">
            <a href="#" class="hover:text-indigo-200 transition-colors">Головна</a>
            <a href="#" class="hover:text-indigo-200 transition-colors">Про нас</a>
            <a href="#" class="hover:text-indigo-200 transition-colors">Контакти</a>
        </nav>
    </header>

    <!-- Середня секція: sidebar + main -->
    <div class="grid grid-cols-[220px_1fr]">
        <!-- Sidebar -->
        <aside class="bg-white border-r border-slate-200 p-4">
            <nav class="flex flex-col gap-1">
                <a href="#" class="px-3 py-2 text-sm font-medium text-indigo-600 bg-indigo-50 rounded-lg">📊 Дашборд</a>
                <a href="#" class="px-3 py-2 text-sm font-medium text-slate-600 hover:bg-slate-100 rounded-lg"
                    >👥 Користувачі</a
                >
                <a href="#" class="px-3 py-2 text-sm font-medium text-slate-600 hover:bg-slate-100 rounded-lg"
                    >⚙️ Налаштування</a
                >
                <a href="#" class="px-3 py-2 text-sm font-medium text-slate-600 hover:bg-slate-100 rounded-lg"
                    >📝 Звіти</a
                >
            </nav>
        </aside>

        <!-- Main content -->
        <main class="p-6 bg-slate-50">
            <h1 class="text-xl font-bold text-slate-800">Дашборд</h1>
            <div class="grid grid-cols-3 gap-4 mt-4">
                <div class="bg-white rounded-lg p-4 border border-slate-200 text-center">
                    <p class="text-2xl font-black text-indigo-600">1,247</p>
                    <p class="text-xs text-slate-500 mt-1">Користувачів</p>
                </div>
                <div class="bg-white rounded-lg p-4 border border-slate-200 text-center">
                    <p class="text-2xl font-black text-emerald-600">$24.5k</p>
                    <p class="text-xs text-slate-500 mt-1">Дохід</p>
                </div>
                <div class="bg-white rounded-lg p-4 border border-slate-200 text-center">
                    <p class="text-2xl font-black text-amber-600">98.2%</p>
                    <p class="text-xs text-slate-500 mt-1">Uptime</p>
                </div>
            </div>
        </main>
    </div>

    <!-- Footer: повна ширина -->
    <footer class="bg-white border-t border-slate-200 px-6 py-3 text-center text-xs text-slate-400">
        © 2025 Мій Сайт. Всі права захищено.
    </footer>
</div>

Ключ до цього layout: вкладені grid. Зовнішній — grid-rows-[auto_1fr_auto] (header + middle + footer). Внутрішній (middle) — grid-cols-[220px_1fr] (sidebar + main).

Патерн: Feature Section з великим featured елементом

Preview

🔒localhost:3000

<div class="p-6 bg-white" style="font-family: system-ui, sans-serif;">
    <div class="grid grid-cols-3 grid-rows-2 gap-4 auto-rows-[180px]">
        <!-- Featured: займає 2x2 -->
        <div
            class="col-span-2 row-span-2 bg-gradient-to-br from-indigo-600 to-violet-700 rounded-2xl p-8 flex flex-col justify-end text-white"
        >
            <span class="text-xs font-bold uppercase tracking-widest text-indigo-300 mb-2">Featured</span>
            <h2 class="text-2xl font-black leading-tight">Нова версія Tailwind CSS 4.0</h2>
            <p class="text-indigo-200 text-sm mt-2">CSS-first конфігурація, OKLCH кольори і Lightning CSS engine.</p>
        </div>
        <!-- Маленька 1 -->
        <div class="bg-slate-100 rounded-2xl p-5 flex flex-col justify-between">
            <span class="text-2xl">⚡</span>
            <div>
                <h3 class="font-bold text-slate-800 text-sm">Lightning CSS</h3>
                <p class="text-xs text-slate-500 mt-1">10x швидша компіляція</p>
            </div>
        </div>
        <!-- Маленька 2 -->
        <div class="bg-amber-50 border border-amber-100 rounded-2xl p-5 flex flex-col justify-between">
            <span class="text-2xl">🎨</span>
            <div>
                <h3 class="font-bold text-amber-800 text-sm">OKLCH кольори</h3>
                <p class="text-xs text-amber-600 mt-1">Нова палітра кольорів</p>
            </div>
        </div>
    </div>
</div>

Адаптивний Layout: breakpoint-варіанти

Tailwind має mobile-first підхід: клас без префіксу діє на всіх розмірах, а префіх-варіант перевизначає зі вказаного breakpoint і вище.

Варіант	Breakpoint	CSS min-width
(нема)	—	Всі розміри
`sm:`	small	640px
`md:`	medium	768px
`lg:`	large	1024px
`xl:`	extra-large	1280px
`2xl:`	2x extra-large	1536px

<!-- Мобільний: 1 колонка → tablet: 2 → desktop: 4 -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
    <!-- Мобільний: flex-col → tablet: flex-row -->
    <div class="flex flex-col md:flex-row gap-4">
        <!-- Схований на мобільному, видимий на lg+ -->
        <aside class="hidden lg:block w-64">
            <!-- Повна ширина на мобільному, авто на md+ -->
            <button class="w-full md:w-auto px-6 py-2 bg-indigo-600 text-white rounded-lg"></button>
        </aside>
    </div>
</div>

Tailwind v4: `max-*` варіанти

У Tailwind v4 з'явилися max-* варіанти — "тільки до breakpoint":

<!-- Тільки на мобільному (до sm) -->
<div class="max-sm:hidden">Приховано до sm</div>

<!-- Від md до lg -->
<div class="md:max-lg:flex">Flex тільки між md і lg</div>

Placement та Z-Index

Absolute розміщення в relative контейнері

<!-- relative = точка відліку для absolute дочірніх -->
<div class="relative w-48 h-32 bg-indigo-100 rounded-xl">
    <!-- Кут: absolute + top/right -->
    <span class="absolute top-2 right-2 px-2 py-0.5 bg-red-500 text-white text-xs rounded-full"> New </span>
    <!-- Перекриває: absolute + inset-0 (top+right+bottom+left = 0) -->
    <div
        class="absolute inset-0 bg-black/50 rounded-xl flex items-center justify-center text-white text-sm opacity-0 hover:opacity-100 transition-opacity"
    >
        Hover overlay
    </div>
</div>

Sticky елементи

<!-- Sticky navbar -->
<nav class="sticky top-0 z-50 bg-white border-b border-gray-200 shadow-sm">
    <!-- Sticky sidebar в межах контейнера -->
    <aside class="sticky top-24 h-fit"></aside>
</nav>

Детальний розгляд Position — у статті про властивості (03).

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

Завдання 1.1. Опишіть словами, що робить кожен набір класів:

<div class="flex items-center justify-between gap-4 px-6 py-3">
    <div class="flex flex-col gap-2 sm:flex-row sm:items-center">
        <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
            <div class="grid grid-cols-12 col-span-8"></div>
        </div>
    </div>
</div>

Завдання 1.2. Реалізуйте горизонтально вирівняний список соціальних іконок (як у footer): іконки size-8, rounded-full, bg-slate-200, hover:bg-indigo-100, рівні відступи між ними через gap-3.

Завдання 1.3. Зробіть картку-профілю: аватар ліворуч (фіксований size-16), ім'я + підпис + кнопки — справа. Flex-row, gap між аватаром і контентом, grow на контентній частині.

Завдання 3.1. Повна сторінка продукту — тільки Tailwind, без CSS.

Структура:

<Navbar>          — flex, sticky, transparent-to-white on scroll (JS class toggle)
<Hero>            — grid, повноекранний, 2 колонки: текст + ілюстрація
<Features>        — grid 3 колонки, картки з іконками
<Testimonials>    — flex, горизонтальний скрол на мобільному
<Pricing>         — grid, 3 тарифи, featured виділений
<FAQ>             — flex flex-col, accordion без JS (details/summary)
<Footer>          — grid, 4 колонки посилань + copyright

Вимоги до адаптивності:

Mobile: всі секції в одну колонку, горизонтальний navbar згортається
Tablet (md): 2 колонки там де є 4
Desktop (lg+): повна багатоколонна сітка

Попередня стаття: Utility-класи: основи та системаНаступна стаття: Кастомізація теми через @theme

Edit this pageorReport an issue

Utility-класи: основи та система Tailwind

Детальний огляд ключових категорій utility-класів Tailwind: spacing, sizing, кольори, типографіка, тіні, borders. Система дизайн-токенів та логіка іменування. Найуживаніші класи на практиці.

Кастомізація теми через @theme у Tailwind v4

CSS-first конфігурація Tailwind v4: @theme директива замість tailwind.config.js. Кастомні кольори через OKLCH, шрифти, breakpoints, spacing, тіні та анімації. Побудова власної дизайн-системи.