Команда разработчиков объявила о выходе версии 4.0 фреймворка Tailwind CSS.

Tailwind CSS v4.0 — это совершенно новая версия фреймворка, оптимизированная для производительности и гибкости, с переосмысленной конфигурацией и кастомизацией, а также использующая все преимущества последних достижений веб-платформ.

  • Новый высокопроизводительный движок, в котором полные сборки выполняются до 5 раз быстрее, а инкрементные сборки — более чем в 100 раз — и измеряются в микросекундах.

  • Разработано для современного Интернета — построено на передовых функциях CSS, таких как каскадные слои, зарегистрированные пользовательские свойства с помощью @propertyи color-mix().

  • Упрощенная установка — меньше зависимостей, отсутствие настроек и всего одна строка кода в CSS-файле.

  • Собственный плагин Vite — тесная интеграция для максимальной производительности и минимальной конфигурации.

  • Автоматическое определение содержимого — все файлы шаблонов обнаруживаются автоматически, без необходимости настройки.

  • Встроенная поддержка импорта — не требуется никаких дополнительных инструментов для объединения нескольких CSS-файлов.

  • CSSfirst конфигурация — переосмысленный опыт разработчика, в котором вы настраиваете и расширяете фреймворк непосредственно в CSS, а не в файле конфигурации JavaScript.

  • Переменные темCSS - все токены вашего дизайна отображаются как нативные переменные CSS, чтобы вы могли получить к ним доступ из любого места.

  • Динамические значения и варианты утилит - больше не нужно гадать, какие значения существуют в шкале интервалов, или расширять конфигурацию для таких вещей, как основные атрибуты данных.

  • Модернизированная цветовая палитра P3 - переработанная, более яркая цветовая палитра, которая в полной мере использует преимущества современных технологий отображения.

  • Контейнерные запросы - первоклассные API для стилизации элементов в зависимости от размера контейнера, плагины не требуются.

  • Новые утилиты 3D трансорфмаций - преобразуйте элементы в 3D пространстве прямо в вашем HTML.

  • Расширенные API градиентов - радиальные и конические градиенты, режимы интерполяции и многое другое.

  • Поддержка @starting-style - новый вариант, который вы можете использовать для создания переходов входа и выхода без необходимости использования JavaScript.

  • not-* вариант - стилизуйте элемент, только если он не соответствует другому варианту, пользовательскому селектору, медиа или запросу функции.

  • Еще больше новых утилит и вариантов, включая поддержку color-scheme, field-sizing, сложных теней, inert и многого другого.

Начните использовать Tailwind CSS v4.0 уже сегодня, установив его в новый проект или поиграв с ним прямо в браузере на Tailwind Play.

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