Tailwind

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

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

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

Логіка іменування: патерн, що треба засвоїти один раз

Перш ніж метушитися з конкретними класами — зрозуміємо логіку. Tailwind-класи не запам'ятовують. Їх виводять з правила.

Більшість класів будуються за шаблоном:

{властивість}-{значення}

або для варіантів:

{варіант}:{властивість}-{значення}

Наприклад:

text-center → {text}-{center} → text-align: center
bg-blue-500 → {bg}-{blue-500} → background-color: <синій відтінок 500>
p-4 → {p}-{4} → padding: 1rem
hover:text-blue-600 → при hover застосувати text-blue-600

Скорочення властивостей — передбачувані:

p → padding, m → margin
t/r/b/l → top/right/bottom/left
x → по горизонталі (left + right), y → по вертикалі (top + bottom)
bg → background, text → color або font-size
w → width, h → height

Коли ви бачите незнайомий клас — спробуйте розкодувати за цим принципом. max-w-lg? Максимальна ширина (max-w) розміру lg. mt-auto? Margin-top auto. border-t → border-top.

Система числових значень: шкала Tailwind

Числа в Tailwind — це не пікселі. Це кроки шкали.

Базова одиниця: 1 = 0.25rem = 4px (при font-size: 16px).

Клас	rem	px
`p-0`	0	0
`p-1`	0.25rem	4px
`p-2`	0.5rem	8px
`p-3`	0.75rem	12px
`p-4`	1rem	16px
`p-5`	1.25rem	20px
`p-6`	1.5rem	24px
`p-8`	2rem	32px
`p-10`	2.5rem	40px
`p-12`	3rem	48px
`p-16`	4rem	64px
`p-20`	5rem	80px
`p-24`	6rem	96px

Ця шкала застосовується до всіх spacing-утиліт: p-, m-, gap-, space-, w-, h-, top-, inset- тощо. Вивчили один раз — розумієте всі.

Запам'ятайте ключові: p-4 = 16px (стандартний внутрішній відступ), p-6 = 24px, p-8 = 32px. У більшості компонентів ці три значення вирішують 80% завдань.

Spacing: відступи

Spacing — найбільша категорія. Охоплює padding, margin та gap.

Padding

<!-- Padding з усіх сторін -->
<div class="p-4">
    <!-- padding: 1rem -->
    <div class="p-8">
        <!-- padding: 2rem -->

        <!-- По осях -->
        <div class="px-6">
            <!-- padding-left + padding-right: 1.5rem -->
            <div class="py-4">
                <!-- padding-top + padding-bottom: 1rem -->

                <!-- По сторонах -->
                <div class="pt-2">
                    <!-- padding-top: 0.5rem -->
                    <div class="pr-4">
                        <!-- padding-right: 1rem -->
                        <div class="pb-6">
                            <!-- padding-bottom: 1.5rem -->
                            <div class="pl-3">
                                <!-- padding-left: 0.75rem -->

                                <!-- Комбінації: різні по горизонталі та вертикалі -->
                                <div class="py-3 px-6"><!-- top/bottom: 0.75rem, left/right: 1.5rem --></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Margin

Такий самий синтаксис, як і padding, але m- замість p-:

<div class="m-4">
    <!-- margin: 1rem з усіх сторін -->
    <div class="mt-8">
        <!-- margin-top: 2rem -->
        <div class="mx-auto">
            <!-- margin-left + margin-right: auto (центрування) -->
            <div class="mb-0">
                <!-- margin-bottom: 0 -->

                <!-- Від'ємні відступи: аватар що "виступає" за межі картки -->
                <img class="-mt-12 -ml-4 ..." />
            </div>
        </div>
    </div>
</div>

Gap (для flex і grid)

<div class="flex gap-4">
    <!-- gap: 1rem між flex-items -->
    <div class="grid gap-6">
        <!-- gap: 1.5rem між grid-cells -->
        <div class="flex gap-x-4 gap-y-2"><!-- горизонтальний та вертикальний gap різний --></div>
    </div>
</div>

Space (відступи між сусідніми елементами)

space-x- та space-y- — зручна альтернатива gap для flex-контейнерів без display:flex або коли gap не підходить:

<div class="flex space-x-4">
    <!-- margin-left між дочірніми: 1rem -->
    <ul class="space-y-2">
        <!-- margin-top між елементами: 0.5rem -->
    </ul>
</div>

Sizing: розміри

Width

<!-- Фіксовані розміри (зі шкали spacing) -->
<div class="w-4">
    <!-- width: 1rem = 16px -->
    <div class="w-16">
        <!-- width: 4rem = 64px -->
        <div class="w-64">
            <!-- width: 16rem = 256px -->

            <!-- Відносні значення -->
            <div class="w-1/2">
                <!-- width: 50% -->
                <div class="w-1/3">
                    <!-- width: 33.333% -->
                    <div class="w-2/3">
                        <!-- width: 66.666% -->
                        <div class="w-3/4">
                            <!-- width: 75% -->

                            <!-- Спеціальні значення -->
                            <div class="w-full">
                                <!-- width: 100% -->
                                <div class="w-screen">
                                    <!-- width: 100vw -->
                                    <div class="w-auto">
                                        <!-- width: auto -->
                                        <div class="w-fit">
                                            <!-- width: fit-content -->
                                            <div class="w-min">
                                                <!-- width: min-content -->
                                                <div class="w-max">
                                                    <!-- width: max-content -->

                                                    <!-- Максимальна/мінімальна ширина -->
                                                    <div class="max-w-sm">
                                                        <!-- max-width: 24rem = 384px -->
                                                        <div class="max-w-md">
                                                            <!-- max-width: 28rem = 448px -->
                                                            <div class="max-w-lg">
                                                                <!-- max-width: 32rem = 512px -->
                                                                <div class="max-w-xl">
                                                                    <!-- max-width: 36rem = 576px -->
                                                                    <div class="max-w-2xl">
                                                                        <!-- max-width: 42rem = 672px -->
                                                                        <div class="max-w-screen-lg">
                                                                            <!-- max-width: 1024px (breakpoint) -->
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Height

Аналогічно до width, але h-:

<div class="h-16">
    <!-- height: 4rem = 64px -->
    <div class="h-full">
        <!-- height: 100% -->
        <div class="h-screen">
            <!-- height: 100vh -->
            <div class="h-svh">
                <!-- height: 100svh (small viewport height — мобільна адресна рядок) -->
                <div class="min-h-screen"><!-- min-height: 100vh --></div>
            </div>
        </div>
    </div>
</div>

Size (новинка v4: width і height одночасно)

<div class="size-10">
    <!-- width: 2.5rem; height: 2.5rem -->
    <div class="size-full"><!-- width: 100%; height: 100% --></div>
</div>

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

<!-- Раніше -->
<div class="w-12 h-12 rounded-full bg-gray-200">
    <!-- Тепер -->
    <div class="size-12 rounded-full bg-gray-200"></div>
</div>

Кольори та прозорість

Система кольорів

Tailwind включає повну палітру з 22 кольорів, кожен у 11 відтінках (50, 100, 200, ..., 900, 950):

<!-- Background colors -->
<div class="bg-slate-100">
    <!-- дуже світлий сіро-блакитний -->
    <div class="bg-blue-500">
        <!-- стандартний синій -->
        <div class="bg-indigo-600">
            <!-- глибший індиго -->
            <div class="bg-emerald-400">
                <!-- яскравий смарагд -->
                <div class="bg-red-950">
                    <!-- майже чорний червоний -->

                    <!-- Text colors -->
                    <p class="text-slate-900"><!-- майже чорний --></p>
                    <p class="text-gray-500"><!-- нейтральний сірий --></p>
                    <p class="text-blue-600">
                        <!-- синій для посилань -->

                        <!-- Border colors -->
                    </p>

                    <div class="border border-gray-200">
                        <div class="border-2 border-indigo-500"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Opacity modifier — найелегантніша особливість

Ви можете прямо в назві класу вказати прозорість через /:

<!-- bg-color/opacity -->
<div class="bg-blue-500/50">
    <!-- background: синій з 50% прозорістю -->
    <div class="bg-black/10">
        <!-- легкий чорний оверлей -->
        <div class="bg-white/20">
            <!-- напівпрозорий білий (glassmorphism) -->

            <!-- text-color/opacity -->
            <p class="text-slate-900/80">
                <!-- текст з 80% непрозорістю -->

                <!-- border-color/opacity -->
            </p>

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

Це замінює окрему властивість opacity: 0.5 і дозволяє робити скляні ефекти без зайвого CSS.

Preview

🔒localhost:3000

<div
    class="p-6 space-y-4"
    style="font-family: system-ui, sans-serif; background: linear-gradient(135deg, #667eea, #764ba2); min-height: 300px;"
>
    <p class="text-white text-sm font-semibold mb-2">Приклади opacity modifier /</p>
    <!-- Glassmorphism картки -->
    <div class="bg-white/10 backdrop-blur-sm border border-white/20 rounded-xl p-4">
        <p class="text-white font-semibold">bg-white/10 + border-white/20</p>
        <p class="text-white/70 text-sm">Glassmorphism ефект через opacity modifier</p>
    </div>
    <div class="bg-white/20 border border-white/30 rounded-xl p-4">
        <p class="text-white font-semibold">bg-white/20 — більш непрозорий</p>
        <p class="text-white/60 text-sm">text-white/60 — приглушений текст</p>
    </div>
    <div class="bg-black/30 border border-white/10 rounded-xl p-4">
        <p class="text-white/90 font-semibold">bg-black/30 — темний оверлей</p>
        <p class="text-white/50 text-sm">text-white/50 — дуже приглушений</p>
    </div>
</div>

Спеціальні кольори

<div class="bg-transparent">
    <!-- background: transparent -->
    <div class="bg-current">
        <!-- background: currentColor -->
        <div class="bg-white">
            <!-- background: #ffffff -->
            <div class="bg-black">
                <!-- background: #000000 -->
                <div class="text-inherit"><!-- color: inherit від батька --></div>
            </div>
        </div>
    </div>
</div>

Типографіка

Клас	font-size	line-height
`text-xs`	0.75rem (12px)	1rem
`text-sm`	0.875rem (14px)	1.25rem
`text-base`	1rem (16px)	1.5rem
`text-lg`	1.125rem (18px)	1.75rem
`text-xl`	1.25rem (20px)	1.75rem
`text-2xl`	1.5rem (24px)	2rem
`text-3xl`	1.875rem (30px)	2.25rem
`text-4xl`	2.25rem (36px)	2.5rem
`text-5xl`	3rem (48px)	1
`text-6xl`	3.75rem (60px)	1

Font Weight

<p class="font-thin"><!-- font-weight: 100 --></p>
<p class="font-light"><!-- font-weight: 300 --></p>
<p class="font-normal"><!-- font-weight: 400 --></p>
<p class="font-medium"><!-- font-weight: 500 --></p>
<p class="font-semibold"><!-- font-weight: 600 --></p>
<p class="font-bold"><!-- font-weight: 700 --></p>
<p class="font-extrabold"><!-- font-weight: 800 --></p>
<p class="font-black"><!-- font-weight: 900 --></p>

Text Alignment, Decoration, Transform

<p class="text-left"><!-- text-align: left --></p>
<p class="text-center"><!-- text-align: center --></p>
<p class="text-right"><!-- text-align: right --></p>
<p class="text-justify"><!-- text-align: justify --></p>

<p class="underline"><!-- text-decoration: underline --></p>
<p class="no-underline"><!-- text-decoration: none --></p>
<p class="line-through"><!-- text-decoration: line-through --></p>

<p class="uppercase"><!-- text-transform: uppercase --></p>
<p class="lowercase"><!-- text-transform: lowercase --></p>
<p class="capitalize"><!-- text-transform: capitalize --></p>

<p class="italic"><!-- font-style: italic --></p>

Letter Spacing та Line Height

<p class="tracking-tighter"><!-- letter-spacing: -0.05em --></p>
<p class="tracking-tight"><!-- letter-spacing: -0.025em --></p>
<p class="tracking-normal"><!-- letter-spacing: 0 --></p>
<p class="tracking-wide"><!-- letter-spacing: 0.025em --></p>
<p class="tracking-wider"><!-- letter-spacing: 0.05em --></p>
<p class="tracking-widest"><!-- letter-spacing: 0.1em --></p>

<p class="leading-none"><!-- line-height: 1 --></p>
<p class="leading-tight"><!-- line-height: 1.25 --></p>
<p class="leading-normal"><!-- line-height: 1.5 --></p>
<p class="leading-loose"><!-- line-height: 2 --></p>

Обрізання тексту

<p class="truncate"><!-- overflow: hidden; white-space: nowrap; text-overflow: ellipsis --></p>
<p class="text-ellipsis"><!-- text-overflow: ellipsis --></p>
<p class="line-clamp-2"><!-- обрізати після 2-го рядка (+ ...) --></p>
<p class="line-clamp-3">
    <!-- після 3-го рядка -->

    <!-- text-wrap (новинки v4) -->
</p>

<h2 class="text-balance">
    <!-- text-wrap: balance — рівномірний розподіл слів по рядках -->
    <p class="text-pretty"><!-- text-wrap: pretty — запобігає одинокому слову наприкінці --></p>
</h2>

Borders та Rounded

Border

<!-- Товщина -->
<div class="border">
    <!-- border-width: 1px -->
    <div class="border-2">
        <!-- border-width: 2px -->
        <div class="border-4">
            <!-- border-width: 4px -->
            <div class="border-0">
                <!-- border-width: 0 -->

                <!-- По сторонах -->
                <div class="border-t">
                    <!-- border-top: 1px solid -->
                    <div class="border-b-2">
                        <!-- border-bottom: 2px solid -->
                        <div class="border-x">
                            <!-- border-left + border-right: 1px -->

                            <!-- Border color + порядок: спочатку border, потім border-color -->
                            <div class="border border-gray-200">
                                <div class="border-2 border-indigo-500">
                                    <div class="border border-red-300/50">
                                        <!-- напівпрозора рамка -->

                                        <!-- Border style -->
                                        <div class="border border-dashed">
                                            <!-- пунктирна -->
                                            <div class="border border-dotted">
                                                <!-- крапкова -->
                                                <div class="border border-solid">
                                                    <!-- суцільна (за замовчуванням) -->
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Border Radius

<div class="rounded">
    <!-- border-radius: 0.25rem = 4px -->
    <div class="rounded-md">
        <!-- border-radius: 0.375rem = 6px -->
        <div class="rounded-lg">
            <!-- border-radius: 0.5rem = 8px -->
            <div class="rounded-xl">
                <!-- border-radius: 0.75rem = 12px -->
                <div class="rounded-2xl">
                    <!-- border-radius: 1rem = 16px -->
                    <div class="rounded-3xl">
                        <!-- border-radius: 1.5rem = 24px -->
                        <div class="rounded-full">
                            <!-- border-radius: 9999px (коло або таблетка) -->
                            <div class="rounded-none">
                                <!-- border-radius: 0 -->

                                <!-- По сторонах -->
                                <div class="rounded-t-xl">
                                    <!-- тільки верхні кути -->
                                    <div class="rounded-b-lg">
                                        <!-- тільки нижні кути -->
                                        <div class="rounded-l-full">
                                            <!-- ліві кути круглі (напів-таблетка) -->
                                            <div class="rounded-tl-2xl"><!-- тільки верхній лівий --></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Divide (рамки між дочірніми)

<!-- Горизонтальна лінія між елементами в flex-колонці -->
<div class="flex flex-col divide-y divide-gray-200">
    <div>Рядок 1</div>
    <div>Рядок 2</div>
    <div>Рядок 3</div>
</div>

<!-- Вертикальна між елементами в ряду -->
<div class="flex divide-x divide-gray-200">
    <div>Колонка 1</div>
    <div>Колонка 2</div>
</div>

Shadows та Ring

Box Shadow

<div class="shadow-sm">
    <!-- невелика тінь -->
    <div class="shadow">
        <!-- стандартна тінь -->
        <div class="shadow-md">
            <!-- середня тінь -->
            <div class="shadow-lg">
                <!-- велика тінь -->
                <div class="shadow-xl">
                    <!-- дуже велика тінь -->
                    <div class="shadow-2xl">
                        <!-- найбільша тінь -->
                        <div class="shadow-none">
                            <!-- без тіні -->
                            <div class="shadow-inner">
                                <!-- внутрішня тінь -->

                                <!-- Shadow color (зафарбована тінь) -->
                                <div class="shadow-lg shadow-indigo-500/30">
                                    <!-- фіолетова напівпрозора тінь -->
                                    <div class="shadow-xl shadow-blue-500/20"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Ring (outline-подібна рамка)

ring — це box-shadow, що виглядає як фокус-рамка. Ідеальне для кнопок і форм:

<button class="ring-2 ring-indigo-500">
    <!-- 2px ring -->
    <button class="ring-4 ring-blue-500/50">
        <!-- напівпрозора ring -->
        <input class="focus:ring-2 focus:ring-indigo-500 focus:outline-none" />
        <!-- focus ring -->

        <!-- Ring offset — простір між елементом і ring -->
        <button class="ring-2 ring-indigo-500 ring-offset-2"></button>
    </button>
</button>

Display та Visibility

<div class="block">
    <!-- display: block -->
    <span class="inline">
        <!-- display: inline -->
        <div class="inline-block">
            <!-- display: inline-block -->
            <div class="flex">
                <!-- display: flex -->
                <div class="inline-flex">
                    <!-- display: inline-flex -->
                    <div class="grid">
                        <!-- display: grid -->
                        <div class="hidden">
                            <!-- display: none -->
                            <div class="table">
                                <!-- display: table -->

                                <!-- Visibility vs Display -->
                                <div class="invisible">
                                    <!-- visibility: hidden (займає місце, але не видно) -->
                                    <div class="visible">
                                        <!-- visibility: visible -->

                                        <!-- Screen-reader only (доступність) -->
                                        <span class="sr-only">Навігаційне меню</span>
                                        <!-- тільки для screen readers -->
                                    </div>
                                </div>
                            </div></div
                        >
                    </div></div
                >
            </div></div
        >
    </span>
</div>

Overflow та Position

<!-- Overflow -->
<div class="overflow-hidden">
    <!-- overflow: hidden -->
    <div class="overflow-auto">
        <!-- overflow: auto (скрол якщо потрібно) -->
        <div class="overflow-scroll">
            <!-- overflow: scroll -->
            <div class="overflow-x-auto">
                <!-- overflow-x: auto -->
                <div class="overflow-y-hidden">
                    <!-- overflow-y: hidden -->

                    <!-- Position -->
                    <div class="relative">
                        <!-- position: relative -->
                        <div class="absolute">
                            <!-- position: absolute -->
                            <div class="fixed">
                                <!-- position: fixed -->
                                <div class="sticky">
                                    <!-- position: sticky -->
                                    <div class="static">
                                        <!-- position: static -->

                                        <!-- Координати -->
                                        <div class="absolute top-0 right-0">
                                            <!-- top: 0; right: 0 -->
                                            <div class="absolute top-4 left-6">
                                                <!-- top: 1rem; left: 1.5rem -->
                                                <div class="absolute inset-0">
                                                    <!-- top+right+bottom+left: 0 (розтягнути) -->
                                                    <div class="absolute inset-y-0 left-0">
                                                        <!-- top+bottom: 0, ліво: 0 -->

                                                        <!-- Z-index -->
                                                        <div class="z-0">
                                                            <!-- z-index: 0 -->
                                                            <div class="z-10">
                                                                <!-- z-index: 10 -->
                                                                <div class="z-50">
                                                                    <!-- z-index: 50 -->
                                                                    <div class="z-auto"><!-- z-index: auto --></div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Transitions та Transform

Transitions

<!-- transition — all changeable properties -->
<div class="transition">
    <!-- transition: all 150ms ease -->
    <div class="transition-colors">
        <!-- тільки color-пов'язані -->
        <div class="transition-transform">
            <!-- тільки transform -->
            <div class="transition-opacity">
                <!-- тільки opacity -->
                <div class="transition-shadow">
                    <!-- тільки shadow -->
                    <div class="transition-none">
                        <!-- вимкнути transition -->

                        <!-- Тривалість -->
                        <div class="duration-150">
                            <!-- 150ms -->
                            <div class="duration-300">
                                <!-- 300ms -->
                                <div class="duration-500">
                                    <!-- 500ms -->
                                    <div class="duration-700">
                                        <!-- 700ms -->

                                        <!-- Easing -->
                                        <div class="ease-linear">
                                            <!-- linear -->
                                            <div class="ease-in">
                                                <!-- cubic-bezier(0.4, 0, 1, 1) -->
                                                <div class="ease-out">
                                                    <!-- cubic-bezier(0, 0, 0.2, 1) -->
                                                    <div class="ease-in-out"><!-- cubic-bezier(0.4, 0, 0.2, 1) --></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Transform

<!-- Scale -->
<div class="scale-100">
    <!-- transform: scale(1) -->
    <div class="scale-105">
        <!-- transform: scale(1.05) -->
        <div class="scale-90">
            <!-- transform: scale(0.9) -->
            <div class="hover:scale-110 transition-transform">
                <!-- Translate -->
                <div class="translate-x-4">
                    <!-- transform: translateX(1rem) -->
                    <div class="translate-y-2">
                        <!-- transform: translateY(0.5rem) -->
                        <div class="-translate-y-1 hover:translate-y-0 transition-transform">
                            <!-- ефект "підйому" -->

                            <!-- Rotate -->
                            <div class="rotate-45">
                                <!-- transform: rotate(45deg) -->
                                <div class="-rotate-90">
                                    <!-- transform: rotate(-90deg) -->
                                    <div class="hover:rotate-12 transition-transform">
                                        <!-- Skew -->
                                        <div class="skew-x-3"><!-- transform: skewX(3deg) --></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Найуживаніші класи: шпаргалка

Ось 50 класів, які вирішать 90% ваших завдань:

Spacing:    p-4 p-6 p-8 px-4 py-2 px-6 py-4 mx-auto mt-4 mb-6 gap-4 gap-6

Sizing:     w-full w-fit max-w-sm max-w-2xl max-w-screen-xl h-full min-h-screen size-10

Display:    flex items-center justify-center justify-between grid hidden block

Flex:       flex-col flex-wrap flex-1 grow shrink-0 gap-3

Grid:       grid-cols-2 grid-cols-3 col-span-2

Colors:     bg-white bg-slate-100 bg-indigo-600 text-slate-900 text-slate-500 text-white border-gray-200

Typography: text-sm text-base text-lg text-xl text-2xl font-medium font-semibold font-bold
            text-center tracking-tight leading-relaxed truncate line-clamp-2

Borders:    rounded-lg rounded-xl rounded-full border border-2 border-gray-200

Shadow:     shadow-sm shadow shadow-lg shadow-xl

Position:   relative absolute fixed sticky inset-0 top-0 right-0

Transitions: transition-colors transition-transform duration-200 hover:scale-105
             hover:shadow-lg hover:bg-indigo-700 focus:outline-none focus:ring-2

Other:      overflow-hidden z-10 opacity-50 cursor-pointer select-none

Живий демо: компоненти в дії

Preview

🔒localhost:3000

<div class="p-8 bg-slate-50 space-y-8" style="font-family: system-ui, sans-serif;">
    <!-- Кнопки -->
    <section>
        <p class="text-xs font-bold text-slate-400 uppercase tracking-widest mb-3">Кнопки</p>
        <div class="flex flex-wrap gap-3 items-center">
            <button
                class="px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-semibold rounded-lg transition-colors shadow-sm"
            >
                Primary
            </button>
            <button
                class="px-4 py-2 border-2 border-indigo-600 text-indigo-600 hover:bg-indigo-50 text-sm font-semibold rounded-lg transition-colors"
            >
                Secondary
            </button>
            <button
                class="px-4 py-2 bg-slate-100 hover:bg-slate-200 text-slate-700 text-sm font-semibold rounded-lg transition-colors"
            >
                Ghost
            </button>
            <button
                class="px-4 py-2 bg-red-500 hover:bg-red-600 text-white text-sm font-semibold rounded-lg transition-colors"
            >
                Danger
            </button>
            <button class="px-3 py-2 bg-emerald-100 text-emerald-700 text-sm font-semibold rounded-lg">Success</button>
        </div>
    </section>

    <!-- Badges -->
    <section>
        <p class="text-xs font-bold text-slate-400 uppercase tracking-widest mb-3">Badges</p>
        <div class="flex flex-wrap gap-2">
            <span class="px-3 py-1 bg-indigo-100 text-indigo-700 text-xs font-bold rounded-full">React</span>
            <span class="px-3 py-1 bg-amber-100 text-amber-700 text-xs font-bold rounded-full">JavaScript</span>
            <span class="px-3 py-1 bg-sky-100 text-sky-700 text-xs font-bold rounded-full">TypeScript</span>
            <span class="px-3 py-1 bg-emerald-100 text-emerald-700 text-xs font-bold rounded-full">✓ Verified</span>
            <span class="px-3 py-1 bg-red-100 text-red-700 text-xs font-bold rounded-full">● Live</span>
        </div>
    </section>

    <!-- Alert/Notice -->
    <section>
        <p class="text-xs font-bold text-slate-400 uppercase tracking-widest mb-3">Alerts</p>
        <div class="space-y-2">
            <div class="flex items-start gap-3 p-4 bg-blue-50 border border-blue-200 rounded-xl">
                <span class="text-blue-500 mt-px flex-shrink-0">ℹ</span>
                <div>
                    <p class="text-sm font-semibold text-blue-800">Інформація</p>
                    <p class="text-sm text-blue-700 mt-0.5">Ваш акаунт успішно оновлено.</p>
                </div>
            </div>
            <div class="flex items-start gap-3 p-4 bg-yellow-50 border border-yellow-200 rounded-xl">
                <span class="text-yellow-500 mt-px flex-shrink-0">⚠</span>
                <div>
                    <p class="text-sm font-semibold text-yellow-800">Попередження</p>
                    <p class="text-sm text-yellow-700 mt-0.5">Строк дії пароля закінчується через 3 дні.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Input -->
    <section>
        <p class="text-xs font-bold text-slate-400 uppercase tracking-widest mb-3">Form Fields</p>
        <div class="space-y-3 max-w-xs">
            <div>
                <label class="block text-sm font-semibold text-slate-700 mb-1">Email</label>
                <input
                    type="email"
                    placeholder="ivan@example.com"
                    class="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 transition-colors"
                />
            </div>
            <div>
                <label class="block text-sm font-semibold text-slate-700 mb-1">Пошук</label>
                <div class="relative">
                    <span class="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400">🔍</span>
                    <input
                        type="text"
                        placeholder="Знайти..."
                        class="w-full pl-9 pr-3 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/20 transition-colors"
                    />
                </div>
            </div>
        </div>
    </section>

    <!-- Card -->
    <section>
        <p class="text-xs font-bold text-slate-400 uppercase tracking-widest mb-3">Card</p>
        <div
            class="bg-white rounded-2xl shadow-sm border border-slate-100 p-5 max-w-xs hover:shadow-md hover:-translate-y-0.5 transition-all"
        >
            <div class="flex items-center gap-3 mb-4">
                <div
                    class="size-10 rounded-xl bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center text-white font-bold text-sm"
                >
                    IK
                </div>
                <div>
                    <p class="text-sm font-bold text-slate-800">Іван Кравченко</p>
                    <p class="text-xs text-slate-500">Frontend Developer</p>
                </div>
            </div>
            <p class="text-sm text-slate-600 leading-relaxed">
                Розробляю інтерфейси на React та Tailwind. Захоплений сучасним CSS.
            </p>
            <div class="flex gap-2 mt-4">
                <span class="px-2 py-0.5 bg-indigo-100 text-indigo-700 text-xs font-semibold rounded-md">React</span>
                <span class="px-2 py-0.5 bg-violet-100 text-violet-700 text-xs font-semibold rounded-md">Tailwind</span>
            </div>
        </div>
    </section>
</div>

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

Завдання 1.1. Не запускаючи браузер — опишіть словами, що робить кожен набір класів:

<div class="flex items-center justify-between px-6 py-4 bg-white border-b border-gray-200">
    <div class="size-8 rounded-full bg-indigo-500 text-white flex items-center justify-center text-sm font-bold">
        <p class="text-sm text-slate-500 line-clamp-2 leading-relaxed">
            <button
                class="px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg font-semibold transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
            ></button>
        </p>
    </div>
</div>

Завдання 1.2. Перекладіть CSS → Tailwind:

.element {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background-color: white;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    font-size: 0.875rem;
    font-weight: 600;
    color: #1e293b;
}

Завдання 1.3. Що означають ці класи? (text-sm/6, bg-indigo-500/30, -mt-4, max-w-prose, w-px)

Завдання 2.1. Notification Banner. Реалізуйте 4 варіанти банерів: success, error, warning, info. Кожен містить: кольорова рамка зліва (4px), іконка, заголовок, текст, кнопка закриття (×) справа. Тільки Tailwind, жодного CSS.

Завдання 2.2. Таблиця даних.

| Ім'я           | Роль          | Статус  | Дія    |
| Іван Кравченко | Admin         | Active  | Edit   |
| Аня Коваль     | Developer     | Active  | Edit   |
| Петро Руденко  | Viewer        | Inactive| Edit   |

Стилізуйте таблицю через Tailwind: zebra rows (odd/even), hover row, sticky header, badge для статусу.

Завдання 2.3. Hero секція. Повноекранна hero-секція: градієнтний фон, заголовок text-balance, підзаголовок, дві CTA-кнопки, декоративні кола rounded-full з opacity.

Попередня стаття: Встановлення та налаштування Tailwind v4Наступна стаття: Layout: Flexbox та Grid через Tailwind

Edit this pageorReport an issue

Встановлення та налаштування Tailwind CSS v4

Покрокове встановлення Tailwind CSS v4 через Vite та CDN. Налаштування редактора, автодоповнення через IntelliSense, Prettier-плагін для сортування класів та перший робочий проєкт.

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

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