Tailwind CSS 4: конфиг переехал в CSS

Главное

Tailwind CSS 4 — самое большое изменение фреймворка со времён появления JIT-режима. Три вещи, которые заметит каждый:

1. Настройка живёт в CSS, а не в JavaScript.
2. Сборка стала быстрее благодаря новому движку Oxide на Rust.
3. Фреймворк опирается на современный CSS: каскадные слои, @property, color-mix(), контейнерные запросы.

Конфигурация в CSS

Файл tailwind.config.js больше не нужен. Тема описывается в самом CSS через директиву @theme:

@import "tailwindcss";

@theme {
  --color-brand: oklch(0.65 0.2 260);
  --font-display: "Inter", sans-serif;
  --breakpoint-3xl: 120rem;
}

Каждая переменная автоматически превращается в набор утилит: bg-brand, text-brand, font-display, 3xl:. Обратная сторона тоже верна: все токены темы доступны как обычные CSS-переменные, и их можно использовать в своём CSS без функции theme().

Пути к исходникам задаются директивой @source, а автоматическое обнаружение файлов работает из коробки и учитывает .gitignore.

Что стало быстрее

Oxide переписал сканер классов и парсер на Rust и объединил в одном проходе то, что раньше делали PostCSS, autoprefixer и сам Tailwind. Полная сборка ускорилась в несколько раз, инкрементальные пересборки при изменении — ещё сильнее. На больших проектах разница ощущается как «сохранил — сразу увидел».

Новое в утилитах

• Контейнерные запросы (@container, @sm:, @lg:) в ядре, без плагина.
• Цвета по умолчанию переведены в OKLCH: шире гамма на современных экранах, ровнее переходы.
• Динамические значения: grid-cols-15, w-17 работают без квадратных скобок и без объявления в теме.
• @starting-style, not-*, inert, field-sizing и другие варианты под свежий CSS.
• Трёхмерные трансформации, inset-shadow, градиенты с углом и интерполяцией.

Что сломается при обновлении

• Убраны устаревшие утилиты вроде bg-opacity-* и flex-shrink-* — вместо них bg-black/50 и shrink-*.
• Изменились значения по умолчанию у border и ring — цвет теперь currentColor, толщина кольца 1px.
• Плагины на JS продолжают работать через @plugin, но многое из того, зачем они были нужны, теперь делается в @theme.
• Нужны свежие браузеры: Safari 16.4, Chrome 111, Firefox 128. Старые не получат часть стилей.

Официальный инструмент миграции переписывает большую часть классов автоматически, но диф стоит просмотреть глазами.

Стоит ли обновляться

Для новых проектов — без вопросов. Для существующих — да, если не нужно поддерживать старые браузеры. Настройка в CSS проще для тех, кто не хочет трогать JavaScript, а прирост скорости сборки заметен на любом проекте крупнее лендинга.