Tailwind CSS v4: Що реально змінилося і чи варто мігрувати | Akousa

9 січня 2026 р.18 хв читання

Tailwind CSS v4: Що реально змінилося і чи варто мігрувати

CSS-first конфігурація, інтеграція з @layer, вбудовані container queries, продуктивність нового рушія, breaking changes та мій чесний досвід міграції з v3 на v4.

Я використовую Tailwind CSS з версії v1.x, ще з тих часів, коли половина спільноти вважала його жахіттям, а інша половина не могла перестати шіпити з ним. Кожна мажорна версія була значним стрибком, але v4 — це інше. Це не просто релізz з фічами. Це архітектурний переписування з нуля, яке змінює фундаментальний контракт між тобою і фреймворком.

Після міграції двох продакшн-проєктів з v3 на v4 та старту трьох нових проєктів відразу на v4, я маю чітку картину того, що реально стало краще, що ще шорстке, і чи варто мігрувати сьогодні. Без хайпу, без обурення — тільки те, що я спостерігав.

Загальна картина: Що таке v4 насправді

Tailwind CSS v4 — це три речі одночасно:

Новий рушій — переписаний з JavaScript на Rust (рушій Oxide), що робить білди драматично швидшими
Нова парадигма конфігурації — CSS-first конфігурація замінює tailwind.config.js як дефолт
Тісніша інтеграція з CSS-платформою — нативні , container queries, та cascade layers стали першокласними громадянами

@layer

@starting-style

// v3 — tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50: "#eff6ff",
          500: "#3b82f6",
          900: "#1e3a5f",
        },
      },
      fontFamily: {
        display: ["Inter Variable", "sans-serif"],
      },
      spacing: {
        18: "4.5rem",
        112: "28rem",
      },
      borderRadius: {
        "4xl": "2rem",
      },
    },
  },
};

css

@import "tailwindcss";
 
@theme {
  --color-brand-50: #eff6ff;
  --color-brand-500: #3b82f6;
  --color-brand-900: #1e3a5f;
 
  --font-display: "Inter Variable", sans-serif;
 
  --spacing-18: 4.5rem;
  --spacing-112: 28rem;
 
  --radius-4xl: 2rem;
}

css

@import "tailwindcss";
 
@theme {
  /* Clear all default colors first */
  --color-*: initial;
 
  /* Now define only your colors */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-brand-50: #eff6ff;
  --color-brand-500: #3b82f6;
  --color-brand-900: #1e3a5f;
}

css

/* styles/theme/colors.css */
@theme {
  --color-brand-50: #eff6ff;
  --color-brand-100: #dbeafe;
  --color-brand-200: #bfdbfe;
  --color-brand-300: #93c5fd;
  --color-brand-400: #60a5fa;
  --color-brand-500: #3b82f6;
  --color-brand-600: #2563eb;
  --color-brand-700: #1d4ed8;
  --color-brand-800: #1e40af;
  --color-brand-900: #1e3a5f;
  --color-brand-950: #172554;
}
 
/* styles/theme/typography.css */
@theme {
  --font-display: "Inter Variable", sans-serif;
  --font-body: "Source Sans 3 Variable", sans-serif;
  --font-mono: "JetBrains Mono Variable", monospace;
 
  --text-display: 3.5rem;
  --text-display--line-height: 1.1;
  --text-display--letter-spacing: -0.02em;
}

Метрика	v3 (Node)	v4 (Oxide)	Покращення
Початковий білд	4 280 мс	387 мс	11x
Інкрементальний (зміна 1 файлу)	340 мс	18 мс	19x
Повний ребілд (чистий)	5 100 мс	510 мс	10x
Старт dev-сервера	3 200 мс	290 мс	11x

css

/* v4 output — simplified */
@layer theme, base, components, utilities;
 
@layer base {
  /* reset, preflight */
}
 
@layer components {
  /* your component classes */
}
 
@layer utilities {
  /* all generated utility classes */
}

css

@layer components {
  /* specificity: 0-1-0 */
  .card {
    padding: 1rem;
  }
}
 
@layer utilities {
  /* specificity: 0-1-0 — same specificity but wins because utilities layer is later */
  .p-4 {
    padding: 1rem;
  }
}

// v3 — plugin approach
const plugin = require("tailwindcss/plugin");
 
module.exports = {
  plugins: [
    plugin(function ({ addUtilities }) {
      addUtilities({
        ".text-balance": {
          "text-wrap": "balance",
        },
        ".text-pretty": {
          "text-wrap": "pretty",
        },
      });
    }),
  ],
};

html

<!-- mark parent as a container -->
<div class="@container">
  <!-- responsive to parent's width, not viewport -->
  <div class="flex flex-col @md:flex-row @lg:grid @lg:grid-cols-3">
    <div class="p-4">Card 1</div>
    <div class="p-4">Card 2</div>
    <div class="p-4">Card 3</div>
  </div>
</div>

html

<div class="@container/sidebar">
  <div class="@container/card">
    <!-- queries the card container -->
    <div class="@md/card:text-lg">...</div>
 
    <!-- queries the sidebar container -->
    <div class="@lg/sidebar:hidden">...</div>
  </div>
</div>

html

<!-- This component adapts to ANY container it's placed in -->
<article class="@container">
  <div class="grid grid-cols-1 @md:grid-cols-[200px_1fr] gap-4">
    <img
      class="w-full @md:w-auto rounded-lg aspect-video @md:aspect-square object-cover"
      src="/post-image.jpg"
      alt=""
    />
    <div>
      <h2 class="text-lg @lg:text-xl font-semibold">Post Title</h2>
      <p class="mt-2 text-sm @md:text-base text-gray-600">Post excerpt goes here...</p>
      <div class="mt-4 hidden @md:flex gap-2">
        <span class="text-xs bg-gray-100 px-2 py-1 rounded">Tag</span>
      </div>
    </div>
  </div>
</article>

html

<!-- every child except the last gets a border -->
<div class="divide-y">
  <div class="not-last:pb-4">Item 1</div>
  <div class="not-last:pb-4">Item 2</div>
  <div class="not-last:pb-4">Item 3</div>
</div>
 
<!-- style everything that's not disabled -->
<input class="not-disabled:hover:border-brand-500" />
 
<!-- negate data attributes -->
<div class="not-data-active:opacity-50">...</div>

html

<ul>
  <li class="nth-1:font-bold">First item — bold</li>
  <li class="nth-even:bg-gray-50">Even rows — gray bg</li>
  <li class="nth-odd:bg-white">Odd rows — white bg</li>
  <li class="nth-[3n+1]:text-brand-500">Every third+1 — brand color</li>
</ul>

html

<!-- all paragraphs inside this div, at any depth -->
<div class="**:data-highlight:bg-yellow-100">
  <section>
    <p data-highlight>This gets highlighted</p>
    <div>
      <p data-highlight>So does this, nested deeper</p>
    </div>
  </section>
</div>

/* REMOVED in v4 */
bg-opacity-*     → use bg-black/50 (slash opacity syntax)
text-opacity-*   → use text-black/50
border-opacity-* → use border-black/50
flex-shrink-*    → use shrink-*
flex-grow-*      → use grow-*
overflow-ellipsis → use text-ellipsis
decoration-slice  → use box-decoration-slice
decoration-clone  → use box-decoration-clone

// v3 plugin
plugin(function ({ addUtilities, theme }) {
  addUtilities({
    ".scrollbar-hide": {
      "-ms-overflow-style": "none",
      "scrollbar-width": "none",
      "&::-webkit-scrollbar": {
        display: "none",
      },
    },
  });
});

// v3 config — before
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          light: "#60a5fa",
          DEFAULT: "#3b82f6",
          dark: "#1d4ed8",
        },
      },
      fontSize: {
        "2xs": ["0.65rem", { lineHeight: "1rem" }],
      },
      animation: {
        "fade-in": "fade-in 0.5s ease-out",
      },
      keyframes: {
        "fade-in": {
          "0%": { opacity: "0" },
          "100%": { opacity: "1" },
        },
      },
    },
  },
};

css

/* v4 CSS — after */
@import "tailwindcss";
 
@theme {
  --color-brand-light: #60a5fa;
  --color-brand: #3b82f6;
  --color-brand-dark: #1d4ed8;
 
  --text-2xs: 0.65rem;
  --text-2xs--line-height: 1rem;
 
  --animate-fade-in: fade-in 0.5s ease-out;
}
 
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

json

{
  "@tailwindcss/typography": "^1.0.0",
  "@tailwindcss/forms": "^1.0.0",
  "@tailwindcss/container-queries": "REMOVE — built-in now",
  "tailwindcss-animate": "check for v4 support",
  "prettier-plugin-tailwindcss": "update to latest"
}

css

/* data attribute approach */
@variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));
 
/* media query — this is the default, so you don't need to declare it */
@variant dark (@media (prefers-color-scheme: dark));

css

@import "tailwindcss";
 
@theme {
  --color-brand: var(--brand-primary, #3b82f6);
  --color-brand-light: var(--brand-light, #60a5fa);
  --color-brand-dark: var(--brand-dark, #1d4ed8);
}
 
/* Brand overrides */
.theme-acme {
  --brand-primary: #e11d48;
  --brand-light: #fb7185;
  --brand-dark: #9f1239;
}
 
.theme-globex {
  --brand-primary: #059669;
  --brand-light: #34d399;
  --brand-dark: #047857;
}

Варіант	Мін. ширина
`@sm`	24rem (384px)
`@md`	28rem (448px)
`@lg`	32rem (512px)
`@xl`	36rem (576px)
`@2xl`	42rem (672px)

Налаштування	v3 + Webpack	v3 + Turbopack	v4 + Turbopack
Холодний старт	4.8 с	2.1 с	1.3 с
HMR (зміна CSS)	450 мс	180 мс	40 мс

Метрика	v3	v4
Пікова пам'ять (білд)	380 МБ	45 МБ
Стабільний стан (dev)	210 МБ	28 МБ

Загальна картина: Що таке v4 насправді

CSS-First конфігурація з @theme

Перевизначення vs. Розширення дефолтної теми

Кілька файлів теми

Рушій Oxide: Реально у 10 разів швидше

Чому він настільки швидший?

Чи реально швидкість має значення?

Нативна інтеграція @layer

Додавання кастомних утиліт

Кастомні варіанти

Container Queries: Вбудовані, без плагіна

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

Іменовані контейнери

Чому це важливо

Нові варіанти, що реально мають значення

Варіант starting:

Варіант not-*

Варіанти nth-*

Варіант in-* (Стан батька)

Варіант **: для глибокої універсальної вибірки

Breaking Changes: Що реально зламалось

1. Формат конфігурації

2. Видалені застарілі утиліти

3. Зміни палітри кольорів за замовчуванням

4. Визначення контенту

5. Зміни Plugin API

6. JIT — єдиний режим

7. Деякі зміни синтаксису варіантів

Гайд з міграції: Реальний процес

Крок 1: Запустити офіційний кодмод

Що кодмод обробляє добре

Що кодмод НЕ обробляє

Крок 2: Виправити конфігурацію PostCSS

Крок 3: Конвертувати конфігурацію теми

Крок 4: Візуальне регресійне тестування

Крок 5: Оновити сторонні залежності

Робота з Next.js

Підхід PostCSS (Рекомендовано для Next.js)

Порядок імпортів CSS

Темний режим

Сумісність з Turbopack

Глибокий розбір продуктивності: Більше ніж швидкість білду

Використання пам'яті

Розмір CSS-виходу

Tree Shaking значень теми

Просунуте: Композиція тем для мультибренду

Чого мені не вистачає від v3

Чи варто мігрувати?

Мігруй зараз, якщо:

Зачекай, якщо:

Не мігруй, якщо:

Моя чесна думка

Схожі записи

Regex Cheat Sheet 2026 — Regular Expressions Made Simple

How to Compress Images Without Losing Quality: The Complete 2026 Guide

Варіант `starting:`

Варіант `not-*`

Варіанти `nth-*`

Варіант `in-*` (Стан батька)

Варіант `**:` для глибокої універсальної вибірки