Tailwind 4 вышел в 2024-м, и год команда привыкала к новой CSS-first модели конфигурации. К началу 2026-го экосистема плагинов отстоялась. Делимся, что реально стоит ставить в новый проект.
Что изменилось концептуально
Главный сдвиг - конфиг переехал из tailwind.config.js в @theme в CSS. Это упрощает интеграцию с дизайн-токенами и инструментами, но ломает привычку. Плагины, которые писались под JS-конфиг, частично пришлось переписать.
Что мы ставим в каждый проект
- @tailwindcss/typography - единственный нормальный способ стилизовать markdown-контент. Обновлён под v4.
- tailwind-merge - слияние конфликтующих классов, без неё нельзя писать переиспользуемые компоненты.
- tailwind-variants - типизированные варианты компонентов, заменили cva на новых проектах.
- @tailwindcss/forms - но осторожно: у v4 свои дефолты для форм, и плагин иногда конфликтует.
Что мы убрали из стека
- @tailwindcss/aspect-ratio - нативные CSS aspect-ratio покрывают 100% сценариев.
- Различные «mega-plugin» сборки в духе DaisyUI - мешают типографике и темизации, проще писать свои компоненты.
- Custom theme generator плагины - через @theme в v4 это делается прямо в CSS.
Стиль работы с темами
В v4 темы естественно реализуются через CSS-переменные и @theme override. Мы держим базовую палитру в @theme, а тёмные/брендовые темы - отдельными CSS-файлами с переопределением переменных. Это работает с design tokens из Figma 1-в-1.
Производительность
Compile time на v4 заметно лучше: на нашем монорепо средний билд CSS уменьшился с 2.4s до 0.6s. На dev-инкрементах - почти моментально. Это меняет ощущения от работы.