Релиз Tailwind CSS v4.0

Команда разработчиков объявила о выходе версии 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.

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