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

Новий движок: в 10 разів швидше

Tailwind v4 замінив старий движок на Oxide — написаний на Rust. Час компіляції для великого проєкту впав з 1-2 секунд до 100-200 мс. Інкрементальна збірка — майже миттєва.

CSS-first конфігурація

Найбільша зміна: замість tailwind.config.js — конфігурація прямо в CSS:

@import "tailwindcss";

@theme {
  --color-brand: #22d3ee;
  --font-heading: "Inter", sans-serif;
  --radius-card: 1rem;
}

Всі кастомні значення автоматично стають CSS-змінними та утилітарними класами. Більше не потрібен JavaScript для конфігурації.

Нативні CSS-змінні замість hardcoded значень

У v3 bg-blue-500 компілювався в background-color: #3b82f6. У v4 — в background-color: var(--color-blue-500). Це відкриває можливості для динамічних тем без JavaScript.

Що ще нового

  • @starting-style підтримка для анімацій появи
  • Нові варіанти: in-*, nth-*, not-*
  • field-sizing для автоматичного розміру textarea
  • Покращений container queries синтаксис
  • Видалено застарілі утиліти та спрощено API

Міграція з v3

Є офіційний upgrade tool: npx @tailwindcss/upgrade. Автоматично конвертує більшість змін. Але є breaking changes — prose плагін, деякі варіанти та браузерна підтримка (немає IE, Safari 15 і старіших).

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

Новий проєкт — однозначно v4. Існуючий проєкт — оцініть ризики: тести, CI/CD, час команди. Якщо є чітке вікно для рефакторингу — мігруйте, виграш у швидкості збірки та чистоті конфігурації помітний.