Tailwind V4: масштабные изменения

Первоначально планировалось выпустить новый движок как часть версии 3.x, но несмотря на приверженность обратно совместимым обновлениям, команда Tailwind CSS считает, что это настолько значительное улучшение, что оно заслуживает отдельного релиза под номером 4.0.

Работа над движком Oxide ведется, однако уже сегодня разработчики открывают исходный код для публичного тестирования первой альфа-версии v4.0.0-alpha. Это позволит вам начать экспериментировать с новым движком и помочь команде довести его до стабильного релиза позже в этом году.

Новый движок, созданный для скорости

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

• В 10 раз быстрее: теперь полная сборка сайта Tailwind CSS занимает 105 мс вместо 960 мс, а фреймворка Catalyst UI — 55 мс вместо 341 мс.
• Меньший размер: новый движок занимает на 35% меньше места после установки, даже учитывая более тяжелые нативные пакеты, такие как переписанные части на Rust и Lightning CSS.
• Rust для важных задач: самые ресурсоемкие и параллелизуемые части фреймворка переведены на язык программирования Rust, при этом ядро Tailwind CSS остается на TypeScript для большей гибкости.
• Одна зависимость: единственная зависимость нового движка — Lightning CSS.
• Собственный парсер: команда Tailwind CSS написала собственный парсер CSS и разработала структуры данных, отвечающие их требованиям. Это позволило сделать парсинг в 2 раза быстрее, чем с использованием PostCSS.

Фичи для современного веб

С Tailwind CSS v4 команда смотрит в будущее и стремимся создать фреймворк, который будет оставаться на передовой позиции в течение многих лет.

• Нативные каскадные слои: Теперь будет использоваться настоящие правила @layer, что решает множество проблем с специфичностью, с которыми сталкивались ранее.
• Явно определенные пользовательские свойства: Использование @property для определения внутренних пользовательских свойств с правильными типами и ограничениями. Это позволяет, например, анимировать градиенты фона.
• Использование color-mix для модификаторов непрозрачности: Это упрощает использование нашего синтаксиса модификаторов непрозрачности при использовании цветовых переменных CSS или даже при регулировке непрозрачности currentColor.
• Контейнерные запросы в ядре: Добавили поддержку контейнерных запросов непосредственно в ядро фреймворка, с новыми вариантами @min-* и @max-* для поддержки диапазонов контейнерных запросов.

Мы также работаем над обновлением нашей цветовой палитры с использованием широкодиапазонных цветов и внедрением поддержки других современных функций CSS, таких как @starting-style, позиционирование якорных элементов и многое другое.

Что изменилось

В новой версии внесены некоторые изменения, о которых стоит упомянуть. Команда старается минимизировать количество изменений, ломающих совместимость с прошлыми версиями, но в v4 есть несколько моментов, на которые стоит обратить внимание:

• Удалены устаревшие утилиты: Убраны давно не документируемые утилиты, такие как text-opacity-*, flex-grow-* и decoration-slice, в пользу их современных аналогов вроде text-{color}/*, grow-* и box-decoration-slice.
• Плагин PostCSS и CLI теперь отдельные пакеты: Главный пакет tailwindcss больше не включает их, так как они нужны не всем. Теперь их следует устанавливать отдельно с помощью пакетов @tailwindcss/postcss и @tailwindcss/cli.
• Нет цвета рамки по умолчанию: Утилита border раньше по умолчанию устанавливала цвет gray-200, теперь же, как и браузеры, она использует currentColor. Это изменение поможет избежать случайного добавления ненужного серого цвета в проект, если вы используете в качестве основного серого цвета zinc, slate или другие библиотеки.
• Ring по умолчанию — 1px: Раньше утилита ring по умолчанию создавала синее кольцо размером 3px. Теперь это кольцо размером 1px и использует currentColor. Часто используется утилита ring-* как альтернативу рамкам, а outline-* для колец фокуса. Поэтому команда решила, что унификация поведения этих утилит будет полезным изменением.

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