Tailwind CSS 4 stable: что меняется и как мигрировать

Tailwind 4 ушёл в стабильную ветку в начале 2025-го. На наших проектах он используется как базовый стек 8 из 10 фронтендов, поэтому миграция - не теоретический вопрос. Делимся подходом, который протестировали на трёх кодбейсах.

Главное в релизе

• CSS-first конфигурация: вместо tailwind.config.js - CSS-переменные в @theme.
• Новый движок Oxide на Rust: сборка в 5–10 раз быстрее.
• Container queries и cascade layers из коробки.
• Удалён JIT - он теперь default и единственный.
• Удалены deprecated утилиты (text-opacity-*, decoration-slice и т.п.).

Что больно при миграции

Главная боль - JS-плагины. Если у вас в config.js были кастомные плагины с logic, их придётся переписать или вытащить как отдельные CSS-файлы. У нас в среднем 3–5 таких на проект.

Вторая боль - кастомные классы через @apply внутри @layer. Поведение немного изменилось, нужно перепроверить порядок специфичности. На одном проекте мы час искали, почему margin-top перестал работать на одном экране.

Наш сценарий миграции

1. Запускаем Tailwind upgrade tool, смотрим автогенерированный диф.
2. Прогоняем визуальные тесты (Percy/Chromatic). Фиксим то, что отъехало - обычно 5–15 экранов.
3. Переписываем JS-плагины в CSS-only.
4. Чистим deprecated утилиты по ESLint-правилу.
5. Замеряем bundle и build time. На наших проектах: bundle -8–12%, build -60–75%.