Вышел 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:
- Новые утилиты для полос прокрутки (scrollbar) — стилизуйте их, не задумываясь о том, какой полуподдерживаемый API браузера нужно использовать на этой неделе.
- Новая утилита @container-size — создавайте контейнеры размера для случаев, когда вашим контейнерным запросам (container queries) нужно учитывать и высоту.
- Новые утилиты 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 получил строку, которую он и так умеет компилировать.
Специальный загрузчик избавляет от этой лишней работы, и мы заметили, что в крупных и сложных проектах на webpack Tailwind стал работать более чем в 2 раза быстрее. Например, вот что мы увидели при тестировании документации tailwindcss.com с использованием Next.js и Turbopack:
Использование такое же, как и у других загрузчиков webpack, к которым вы привыкли:
webpack.config.js
Поскольку Turbopack поддерживает загрузчики webpack через слой совместимости, эти улучшения переносятся и туда, что очень важно для таких фреймворков, как Next.js, где Turbopack становится стандартом.
Подробности см. в документации по 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, зависят от размера блока (block size) контейнера, а контейнеры inline-size не предоставляют эту информацию.
Поэтому в v4.3 мы добавили @container-size, который вместо этого создает контейнер размера (size container):
Вы также можете давать имена контейнерам размера с помощью @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.
Поддержка вложенных (stacked) и составных (compound) @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 — это преступление, которое может привести к приостановке действия вашей лицензии разработчика ПО.
