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

9 января 2026 г.19 мин чтения

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

CSS-first конфигурация, интеграция с @layer, встроенные container queries, производительность нового движка, ломающие изменения и мой честный опыт миграции с v3 на v4.

Я использую Tailwind CSS начиная с v1.x, ещё в те времена, когда половина сообщества считала его уродством, а другая половина не могла остановиться и продолжала выпускать продукты с ним. Каждая мажорная версия была значительным скачком, но v4 — это другое. Это не просто релиз с новыми функциями. Это архитектурное переписывание с нуля, которое меняет фундаментальный контракт между вами и фреймворком.

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

Общая картина: что такое v4 на самом деле

Tailwind CSS v4 — это три вещи одновременно:

Новый движок — переписан с JavaScript на Rust (движок Oxide), что кардинально ускоряет сборку
Новая парадигма конфигурации — CSS-first конфигурация заменяет в качестве варианта по умолчанию

tailwind.config.js

// 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";
 
/* Это РАСШИРЯЕТ тему по умолчанию — добавляет brand-цвета наряду с существующими */
@theme {
  --color-brand-500: #3b82f6;
}

css

@import "tailwindcss";
 
@theme {
  /* Сначала очищаем все цвета по умолчанию */
  --color-*: initial;
 
  /* Теперь определяем только свои цвета */
  --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 вывод — упрощённо */
@layer theme, base, components, utilities;
 
@layer base {
  /* reset, preflight */
}
 
@layer components {
  /* ваши классы компонентов */
}
 
@layer utilities {
  /* все сгенерированные классы утилит */
}

css

@layer components {
  /* специфичность: 0-1-0 */
  .card {
    padding: 1rem;
  }
}
 
@layer utilities {
  /* специфичность: 0-1-0 — та же специфичность, но побеждает, потому что слой utilities идёт позже */
  .p-4 {
    padding: 1rem;
  }
}

// v3 — подход с плагинами
const plugin = require("tailwindcss/plugin");
 
module.exports = {
  plugins: [
    plugin(function ({ addUtilities }) {
      addUtilities({
        ".text-balance": {
          "text-wrap": "balance",
        },
        ".text-pretty": {
          "text-wrap": "pretty",
        },
      });
    }),
  ],
};

html

<!-- помечаем родителя как контейнер -->
<div class="@container">
  <!-- адаптивность к ширине родителя, а не вьюпорта -->
  <div class="flex flex-col @md:flex-row @lg:grid @lg:grid-cols-3">
    <div class="p-4">Карточка 1</div>
    <div class="p-4">Карточка 2</div>
    <div class="p-4">Карточка 3</div>
  </div>
</div>

html

<div class="@container/sidebar">
  <div class="@container/card">
    <!-- запрос к контейнеру card -->
    <div class="@md/card:text-lg">...</div>
 
    <!-- запрос к контейнеру sidebar -->
    <div class="@lg/sidebar:hidden">...</div>
  </div>
</div>

html

<!-- Этот компонент адаптируется к ЛЮБОМУ контейнеру, в который его поместят -->
<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">Заголовок поста</h2>
      <p class="mt-2 text-sm @md:text-base text-gray-600">Отрывок поста здесь...</p>
      <div class="mt-4 hidden @md:flex gap-2">
        <span class="text-xs bg-gray-100 px-2 py-1 rounded">Тег</span>
      </div>
    </div>
  </div>
</article>

html

<!-- каждый дочерний элемент, кроме последнего, получает рамку -->
<div class="divide-y">
  <div class="not-last:pb-4">Элемент 1</div>
  <div class="not-last:pb-4">Элемент 2</div>
  <div class="not-last:pb-4">Элемент 3</div>
</div>
 
<!-- стилизовать всё, что не disabled -->
<input class="not-disabled:hover:border-brand-500" />
 
<!-- отрицание data-атрибутов -->
<div class="not-data-active:opacity-50">...</div>

html

<ul>
  <li class="nth-1:font-bold">Первый элемент — жирный</li>
  <li class="nth-even:bg-gray-50">Чётные строки — серый фон</li>
  <li class="nth-odd:bg-white">Нечётные строки — белый фон</li>
  <li class="nth-[3n+1]:text-brand-500">Каждый третий+1 — brand-цвет</li>
</ul>

html

<!-- все параграфы внутри этого div, на любой глубине -->
<div class="**:data-highlight:bg-yellow-100">
  <section>
    <p data-highlight>Это будет подсвечено</p>
    <div>
      <p data-highlight>И это тоже, вложенное глубже</p>
    </div>
  </section>
</div>

/* УДАЛЕНЫ в v4 */
bg-opacity-*     → используйте bg-black/50 (синтаксис со слэшем)
text-opacity-*   → используйте text-black/50
border-opacity-* → используйте border-black/50
flex-shrink-*    → используйте shrink-*
flex-grow-*      → используйте grow-*
overflow-ellipsis → используйте text-ellipsis
decoration-slice  → используйте box-decoration-slice
decoration-clone  → используйте box-decoration-clone

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

// конфиг v3 — до
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 — после */
@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": "УДАЛИТЬ — теперь встроено",
  "tailwindcss-animate": "проверить поддержку v4",
  "prettier-plugin-tailwindcss": "обновить до последней версии"
}

css

@import "tailwindcss";
 
/* Используем тёмную тему на основе класса (по умолчанию — на основе media query) */
@variant dark (&:where(.dark, .dark *));

css

/* подход с data-атрибутом */
@variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));
 
/* media query — это значение по умолчанию, поэтому объявлять его не нужно */
@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);
}
 
/* Переопределения бренда */
.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-* (состояние родителя)

Глубокий универсальный вариант **:

Ломающие изменения: что реально сломалось

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

2. Удалённые устаревшие утилиты

3. Изменения палитры цветов по умолчанию

4. Обнаружение контента

5. Изменения API плагинов

6. JIT — единственный режим

7. Некоторые изменения синтаксиса вариантов

Руководство по миграции: реальный процесс

Шаг 1: Запустите официальный codemod

Что codemod обрабатывает хорошо

Что codemod НЕ обрабатывает

Шаг 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-*` (состояние родителя)

Глубокий универсальный вариант `**:`