Вышел Tailwind CSS v4.3, и поскольку выпуск v4.2 оказался проще, чем написание поста о нем, эта публикация тайно охватывает нововведения сразу двух релизов.
Вот что появилось в v4.2:
- Новые палитры mauve, olive, mist и taupe — еще четыре нейтральных оттенка на случай, если gray, zinc, neutral, stone и slate вас чем-то не устроили.
- Первоклассный плагин для webpack — для значительного повышения производительности в таких фреймворках, как Next.js.
- Больше утилит для логических свойств — включая pbs-*, mbs-*, inline-*, block-* и новые логические утилиты для inset.
- Новая утилита font-features-* — управляйте низкоуровневыми функциями OpenType без необходимости каждый раз писать собственный CSS.
…а вот что нового в v4.3:
- Новые утилиты для полос прокрутки — стилизуйте полосы прокрутки, не задумываясь о том, какой полуподдерживаемый API браузера нужно использовать на этой неделе.
- Новая утилита @container-size — создавайте контейнеры размера, когда вашим контейнерным запросам нужно учитывать и высоту.
- Новые утилиты zoom-* — используйте свойство CSS zoom прямо в разметке, теперь, когда все браузеры наконец согласились с его существованием.
- Новые утилиты tab-* — управляйте отображаемой шириной символов табуляции, только, пожалуйста, не делайте ее равной восьми, как это было в GitHub.
- Поддержка составных и вложенных @variant — используйте вложенные и составные варианты прямо в CSS.
- Значения по умолчанию для функциональных утилит — определяйте утилиты, которые работают как со значением, так и без него.
Многие улучшения v4.2, включая новые утилиты для логических свойств и поддержку font-features-*, стали результатом сотрудничества с командами Netflix и Vercel в рамках нашей партнерской программы. Если есть подобные улучшения фреймворка, которые помогут Tailwind CSS лучше работать для вашей команды, мы будем рады помочь.
Обновите свои проекты, установив последнюю версию tailwindcss из npm:
Использование Tailwind CLI
Использование Vite
Использование PostCSS
Использование webpack
Новые палитры mauve, olive, mist и taupe
В v4.2 мы добавили четыре новые цветовые палитры в тему по умолчанию: mauve, olive, mist и taupe.
Изначально они появились в Oatmeal, наборе для маркетингового сайта с несколькими темами, который мы выпустили для Tailwind Plus в декабре, где нам требовалось еще несколько нейтральных палитр, которые отличались бы от уже имеющихся серых оттенков.
Все они относятся к той полезной категории «околонейтральных» цветов, когда хочется чего-то, что ведет себя как серый, но обладает большей индивидуальностью:
100
200
300
400
500
600
700
800
900
950
mauve
olive
mist
taupe
Это отличная замена существующим серым палитрам, когда вы хотите, чтобы весь дизайн был немного теплее, холоднее, зеленее или… «лиловее»?
Посмотрите документацию по цветам, чтобы увидеть красивую сетку всех доступных оттенков.
Первоклассный плагин для webpack
В Tailwind CSS v4.2 добавлен специальный загрузчик @tailwindcss/webpack для интеграции Tailwind CSS в проекты на webpack.
До этого проекты на webpack обычно использовали Tailwind через postcss-loader и @tailwindcss/postcss, что работает, но означает, что CSS должен совершить небольшой обход через PostCSS, чтобы Tailwind мог получить строку, которую он и так умеет компилировать.
Специальный загрузчик пропускает эту лишнюю работу, и мы заметили, что он ускоряет Tailwind более чем в 2 раза в крупных и сложных проектах на webpack. Например, вот что мы увидели при тестировании документации tailwindcss.com с Next.js и Turbopack:
Его использование аналогично настройке других загрузчиков webpack, к которой вы привыкли:
webpack.config.js
Поскольку Turbopack поддерживает загрузчики webpack через слой совместимости, эти улучшения переносятся и туда, что очень важно для таких фреймворков, как Next.js, где Turbopack становится стандартом.
Подробности см. в README для @tailwindcss/webpack.
Больше утилит для логических свойств
В Tailwind CSS v4.2 добавлено множество новых утилит для логических свойств, что упрощает создание макетов, которые правильно адаптируются к различным режимам письма и направлениям.
Для отступов появились новые утилиты block-start и block-end для padding, margin, scroll padding, scroll margin и границ:
Мы также добавили логические утилиты размера для inline-size и block-size, а также варианты min и max:
И мы добавили логические утилиты inset для позиционирования элементов:
Существующие утилиты start-* и end-* по-прежнему доступны, но теперь они считаются устаревшими в пользу inset-s-* и inset-e-*, чтобы весь API соответствовал inset-bs-* и inset-be-*.
Подробности см. в документации по padding, margin, scroll-padding, scroll-margin, border-width, inline-size, block-size и top / right / bottom / left.
Новая утилита font-features-*
Мы также добавили утилиты font-features-* для управления font-feature-settings:
normal
100.00
218.40
864.12
font-features-["tnum"]
100.00
218.40
864.12
Для распространенных случаев, таких как табличные цифры, сначала следует использовать высокоуровневые утилиты, такие как tabular-nums, потому что никто не должен запоминать, что "tnum" — это вещь.
Но когда вам нужно включить специфический для шрифта стилистический набор или другую функцию OpenType, для которой у нас нет специальной утилиты, font-features-* дает вам чистый путь для выхода.
Подробности см. в документации по font-feature-settings.
Tailwind CSS v4.3 добавляет встроенные утилиты для API полос прокрутки CSS, так что вы наконец-то сможете выполнять скучную, но полезную работу с полосами прокрутки, не открывая вторую вкладку и не вспоминая, какой браузер что поддерживает.
Используйте scrollbar-auto, scrollbar-thin и scrollbar-none для управления scrollbar-width:
Вертикальная прокрутка
Архивы Cerulean занимают три узких этажа над старой обсерваторией, каждый из которых уставлен ящиками со звездными картами, заметками об экспедициях и латунными инструментами, каталогизированными вручную.
Зимними утрами сотрудники перекатывают лестницы между полками, пока бледный свет прорезает окна крыши и ложится на столы для чтения.
Посетители могут запросить что угодно из коллекции, но большинство приходят за атласами, на которых нанесены береговые линии, больше не встречающиеся на современных картах.
Каждый возвращенный том осматривается, очищается от пыли и упаковывается, прежде чем его возвращают на полки для следующего исследователя.
Вы также можете управлять цветами полос прокрутки с помощью утилит scrollbar-thumb-* и scrollbar-track-*:
Они также работают с обычными модификаторами прозрачности цвета:
А для предотвращения сдвига макета при появлении полос прокрутки мы добавили scrollbar-gutter-auto, scrollbar-gutter-stable и scrollbar-gutter-both:
scrollbar-gutter-auto
Всем привет! Почти 2027 год, а мы до сих пор не знаем, живут ли среди нас инопланетяне, или знаем? Может быть, человек, который это пишет, — инопланетянин. Вы никогда не узнаете.
scrollbar-gutter-stable
Подробности см. в документации по scrollbar-width, scrollbar-color и scrollbar-gutter.
Новая утилита @container-size
В Tailwind CSS v4.0 мы добавили встроенную поддержку контейнерных запросов с помощью утилиты @container, которая создает контейнер inline-size.
Это то, что нужно в большинстве случаев, но единицы длины контейнерных запросов, такие как cqb и cqh, зависят от размера блока контейнера, а контейнеры inline-size не предоставляют эту информацию.
Поэтому в v4.3 мы добавили @container-size, который вместо этого создает контейнер размера:
Вы также можете давать имена контейнерам размера, используя @container-size/{name}, точно так же, как @container/{name}.
Подробности можно найти в документации по адаптивному дизайну.
Новые утилиты zoom-*
В Tailwind CSS v4.3 добавлены утилиты zoom-* для CSS-свойства zoom — одной из тех старинных функций браузеров, которая поддерживалась в Chrome 1 еще в 2008 году, но получила полную поддержку во всех основных браузерах только в 2024 году, пройдя долгий путь через исправление давних ошибок в SVG:
Вы также можете использовать произвольные значения и CSS-переменные:
Подробности можно найти в документации по zoom.
Новые утилиты tab-*
Мы также добавили утилиты tab-* для управления отображаемой шириной символов табуляции с помощью tab-size.
Это особенно полезно для примеров кода, редакторов и любых других интерфейсов, где вы отображаете предварительно отформатированный текст, который может содержать реальные символы табуляции:
tab-2
tab-8
Произвольные значения и CSS-переменные здесь также работают:
Подробности можно найти в документации по tab-size.
Поддержка стековых и составных @variant
Tailwind CSS v4.3 делает @variant более гибким, когда вы используете варианты в CSS, а не напрямую в разметке.
Теперь вы можете использовать стековые варианты:
CSS
Скомпилированный CSS
И вы можете использовать составные варианты, чтобы применять один и тот же блок CSS к нескольким вариантам:
CSS
Скомпилированный CSS
Обычно лучше создавать полноценный компонент и стилизовать его непосредственно классами Tailwind CSS, но когда CSS является подходящим инструментом, это делает работу с @variant намного удобнее.
Подробности можно найти в документации по @variant.
Значения по умолчанию для функциональных утилит
В Tailwind CSS v4.0 были представлены функциональные определения @utility, где можно использовать --value(…) и --modifier(…) для создания утилит, принимающих значения темы, обычные значения, произвольные значения и модификаторы.
В версии v4.3 теперь можно передавать --default(…) в --value(…) и --modifier(…), когда утилита должна работать как со значением, так и без него:
CSS
Теперь базовая утилита tab может использовать значение по умолчанию 4, в то время как tab-2 по-прежнему будет использовать 2:
HTML
Сгенерированный CSS
Это упрощает создание API, где базовая утилита выполняет очевидное действие, при этом сохраняя поддержку явных значений для того же семейства утилит.
Это мелочь, но она позволяет авторам плагинов и всем, кто пишет собственные утилиты, создавать API, которые ощущаются так же, как те, что мы поставляем в самом фреймворке.
Вот и все о Tailwind CSS v4.2 и v4.3!
Обновитесь до последней версии с помощью npm и начните экспериментировать уже сегодня:
Использование Tailwind CLI
Использование Vite
Использование PostCSS
Использование webpack
Попробуйте новые возможности и расскажите нам о своих впечатлениях. Только помните, что размер табуляции более 4 — это преступление, которое может привести к аннулированию вашей лицензии инженера-программиста.
