Tailwind CSS v4.1: Тени текста, маски и многое другое

Я не был уверен, что это когда-либо произойдет, но мы сделали это — мы выпустили версию Tailwind CSS, которая включает утилиты text-shadow.

Tailwind CSS v4.1 здесь, и он наполнен новыми утилитами, вариантами и улучшениями для разработчиков, которые помогут вам (или вашему ИИ, трусишка) создавать еще лучшие интерактивные впечатления.

Вот все самое лучшее, что мы включили в этот релиз:

• Новые утилиты text-shadow-* — всего лишь лет через двадцать после того, как они впервые были поддержаны браузером.
• Маскирование элементов с помощью утилит mask-* — используйте изображения и градиенты для маскирования элементов с новыми эргономичными API.
• Улучшенная совместимость со старыми браузерами — мы сделали так, чтобы всё деградировало намного более плавно для старых браузеров, при этом по-прежнему используя современные функции в браузерах, которые их поддерживают.
• Точное перенос текста с overflow-wrap — защитите целостность ваших макетов от даже самых длинных немецких слов, которые ваши пользователи могут вам подбросить.
• Поддержка цветных drop-shadow — не могу вспомнить, почему у нас их не было раньше, но теперь они есть.
• Нацеливание на устройства ввода с pointer-* и any-pointer-* — настраивайте дизайн для сенсорных устройств явно, вместо того чтобы полагаться на размер viewport.
• Выравнивание элементов по последней базовой линии — выравнивайте flex или grid элементы по базовой линии последней строки текста с помощью новых утилит items-baseline-last и self-baseline-last.
• Сохраняйте контент видимым с safe выравниванием — центрируйте контент в flex и grid макетах без его исчезновения, когда недостаточно места.
• Игнорирование конкретных путей с @source not — явно игнорируйте нерелевантные большие директории и ускоряйте ваши сборки ещё больше.
• Safelist конкретных утилит с @source inline(…) — заставьте Tailwind включать классы, которых нет в ваших исходных файлах.
• Куча других новых вариантов — включая noscript, user-valid, inverted-colors и другие.

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

Обновите ваши проекты, установив последнюю версию tailwindcss из npm:

npm install tailwindcss@latest @tailwindcss/cli@latest

npm install tailwindcss@latest @tailwindcss/vite@latest

npm install tailwindcss@latest @tailwindcss/postcss@latest

Новые утилиты text-shadow-*

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

Мы добавили пять теней текста в стандартную тему, от text-shadow-2xs до text-shadow-lg. Они особенно полезны для выделения заголовков на загруженном фоне:

<p class="text-shadow-2xs ...">Быстрая коричневая лиса...</p><p class="text-shadow-xs ...">Быстрая коричневая лиса...</p><p class="text-shadow-sm ...">Быстрая коричневая лиса...</p><p class="text-shadow-md ...">Быстрая коричневая лиса...</p><p class="text-shadow-lg ...">Быстрая коричневая лиса...</p>

Вы можете изменить цвет тени, используя утилиты text-shadow-<color>. Например, вы можете создать своего рода эффект тиснения, используя небольшую белую тень на темном тексте:

<button class="text-sky-950 text-shadow-2xs text-shadow-sky-300 ...">Забронировать демо</button><button class="text-gray-950 dark:text-white dark:text-shadow-2xs ...">Посмотреть цены</button>

Если вы просто хотите настроить прозрачность тени текста, не меняя цвет, вы можете добавить модификатор прозрачности прямо к утилитам размера тени текста, таким как text-shadow-lg.

Например, text-shadow-lg/50 — это то же самое, что установить text-shadow-lg и text-shadow-black/50 одновременно:

<p class="text-shadow-lg ...">Быстрая коричневая лиса...</p><p class="text-shadow-lg/20 ...">Быстрая коричневая лиса...</p><p class="text-shadow-lg/30 ...">Быстрая коричневая лиса...</p>

Ознакомьтесь с документацией text-shadow для получения более подробной информации.

Маскирование элементов с помощью утилит mask-*

Одна из самых крутых функций современного CSS — это возможность использовать изображения и градиенты в качестве масок — по сути, использование прозрачности изображения для скрытия определенных частей элемента:

Скорость

Создано для опытных пользователей

Работайте быстрее, чем когда-либо, с нашими сочетаниями клавиш

<div class="mx-auto flex items-center p-16 max-sm:p-8">  <img    src="/img/keyboard.png"    class="mask-radial-from-transparent mask-radial-from-15% mask-radial-to-black mask-radial-to-55% mask-radial-at-right ..."  />  <div class="font-medium">    <p class="font-mono text-xs text-blue-500 uppercase dark:text-blue-400">Скорость</p>    <p class="mt-2 text-base text-gray-700 dark:text-gray-300">Создано для опытных пользователей</p>    <p class="mt-1 text-sm leading-relaxed text-balance text-gray-500">      Работайте быстрее, чем когда-либо, с нашими сочетаниями клавиш    </p>  </div></div>

Поскольку вы можете использовать любое background-image в качестве маски, логичным было бы скопировать утилиты bg-*, чтобы они использовали тот же API. Проблема с этим подходом в том, что вы часто хотите комбинировать несколько масок вместе, а утилиты bg-* не являются композируемыми.

Поэтому вместо этого мы создали новый набор утилит для работы с mask-image, которые являются композируемыми и специально созданы для случая использования маскирования. Например, вы можете использовать утилиты типа mask-b-from-<value> и mask-t-to-<value> для добавления линейной градиентной маски к одной стороне элемента:

<div class="mask-t-from-50% bg-[url(/img/mountains.jpg)] ..."></div><div class="mask-r-from-30% bg-[url(/img/mountains.jpg)] ..."></div><div class="mask-l-from-50% mask-l-to-90% bg-[url(/img/mountains.jpg)] ..."></div><div class="mask-b-from-20% mask-b-to-80% bg-[url(/img/mountains.jpg)] ..."></div>

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

Утилиты градиентных масок также являются композируемыми, поэтому вы можете комбинировать радиальные, конические и линейные градиенты вместе для создания более сложных масок:

<div class="mask-b-from-50% mask-radial-[50%_90%] mask-radial-from-80% bg-[url(/img/mountains.jpg)] ..."></div><div class="mask-r-from-80% mask-b-from-80% mask-radial-from-70% mask-radial-to-85% bg-[url(/img/mountains.jpg)] ..."></div>

Маскирование — это супер мощная техника, и в API гораздо больше, чем мы можем охватить здесь. Для полного разбора новых утилит ознакомьтесь с документацией.

Улучшенная совместимость со старыми браузерами

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

К сожалению, некоторые из этих функций очень плохо деградируют в старых браузерах, до такой степени, что даже базовые вещи, такие как цвета и тени, могут вообще не отображаться для кого-то, кто заходит со старого iPhone или iPad, застрявшего на Safari 15.

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

Вот список вещей, которые нам удалось улучшить в этом релизе:

• Цвета, определенные в oklab, теперь отображаются в старых версиях Safari
• Функции, которые зависят от пользовательских свойств, определенных с помощью @property (такие как тени, трансформации, градиенты и многое другое), теперь работают в старых версиях Safari и Firefox
• Цвета, использующие модификатор прозрачности, теперь отображаются с встроенными fallback'ами в старых браузерах
• Градиенты, использующие явные методы интерполяции, fallback'ают к браузерному значению по умолчанию, когда не поддерживаются

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

Чтобы узнать все, что вам нужно знать о совместимости браузеров в Tailwind CSS v4, вы можете прочитать полную документацию по совместимости браузеров.

Точное перенос текста с overflow-wrap

Новые утилиты overflow-wrap позволяют вам контролировать, как текст переносится внутри элемента. Утилита wrap-break-word особенно полезна для длинных слов или URL, которые в противном случае могут сломать ваш макет:

<p class="wrap-break-word">Самое длинное слово в любом из основных...</p>

Единственный случай, когда это не ведет себя совсем так, как вы ожидаете, это внутри flex контейнера, и именно там вы, вероятно, захотите использовать новую утилиту wrap-anywhere.

Она похожа на wrap-break-word, но позволяет переносы строк в середине слова при вычислении внутреннего размера элемента, заменяя необходимость устанавливать min-width: 0 на дочернем элементе:

wrap-break-word

Джей Рименшнайдер

jason.riemenschneider@vandelayindustries.com

wrap-anywhere

Джей Рименшнайдер

jason.riemenschneider@vandelayindustries.com

<div class="flex max-w-sm">  <img class="size-16 rounded-full" src="/img/profile.jpg" />  <div class="wrap-break-word">    <p class="font-medium">Джей Рименшнайдер</p>    <p>jason.riemenschneider@vandelayindustries.com</p>  </div></div><div class="flex max-w-sm">  <img class="size-16 rounded-full" src="/img/profile.jpg" />  <div class="wrap-anywhere">    <p class="font-medium">Джей Рименшнайдер</p>    <p>jason.riemenschneider@vandelayindustries.com</p>  </div></div>

В этом не так уж много больше, но вот документация overflow-wrap, если вы хотите прочитать ее снова немного другими словами.

Поддержка цветных drop-shadow

Пока мы создавали поддержку text-shadow, мы подумали, что можем также добавить еще одну функцию, которую мы никогда не успевали реализовать: цветные drop shadow.

Теперь вы можете использовать утилиты типа drop-shadow-indigo-500 и drop-shadow-cyan-500/50 для изменения цвета drop shadow:

<svg class="fill-cyan-500 drop-shadow-xl drop-shadow-cyan-500/50 ...">...</svg><svg class="fill-blue-500 drop-shadow-xl drop-shadow-blue-500/50 ...">...</svg><svg class="fill-indigo-500 drop-shadow-xl drop-shadow-indigo-500/50 ...">...</svg>

В этом не так уж много больше, но вот документация drop-shadow в любом случае.

Нацеливание на устройства ввода с pointer-* и any-pointer-*

Новые варианты pointer-fine и pointer-coarse позволяют вам стилизовать что-то по-разному в зависимости от того, использует ли пользователь устройство с мышью или сенсорный экран.

Используйте pointer-fine для нацеливания на точные указывающие устройства, такие как мыши и трекпады, и pointer-coarse для нацеливания на устройства с более низкой точностью, такие как сенсорные экраны:

<fieldset aria-label="Выберите вариант памяти">  <div class="flex items-center justify-between">    <div>ОЗУ</div>    <a href="#"> Посмотреть характеристики производительности </a>  </div>  <div class="mt-4 grid grid-cols-6 gap-2 pointer-coarse:mt-6 pointer-coarse:grid-cols-3 pointer-coarse:gap-4">    <label class="p-2 pointer-coarse:p-4 ...">      <input type="radio" name="memory-option" value="4 GB" className="sr-only" />      <span>4 ГБ</span>    </label>    <!-- ... -->  </div></fieldset>

Если вы на телефоне, вы увидите примененные стили pointer-coarse, которые делают сенсорные цели больше и легче для нажатия. Если вы на десктопе, вы увидите примененные стили pointer-fine, которые делают сенсорные цели меньше и более точными.

Варианты any-pointer-* работают так же, но вместо того, чтобы просто проверять основное указывающее устройство пользователя, они проверяют, соответствует ли любое указывающее устройство. Так что any-pointer-coarse будет соответствовать на ноутбуке с сенсорным экраном, например, даже если у пользователя также подключена мышь.

Выравнивание элементов по последней базовой линии

Когда работаете с flex или grid макетами, иногда вам нужно выровнять что-то по базовой линии последней строки текста, а не по концу контейнера.

Новая утилита items-baseline-last делает именно это:

Спенсер Шарп

Работает над будущим набора астронавтов в Space Recruit.

spacerecruit.com

Алекс Рид

Мультидисциплинарный дизайнер.

alex-reed.com

<div class="grid grid-cols-[1fr_auto] items-baseline-last">  <div>    <img src="img/spencer-sharp.jpg" />    <h4>Спенсер Шарп</h4>    <p>Работает над будущим набора астронавтов в Space Recruit.</p>  </div>  <p>spacerecruit.com</p></div>

Мы также добавили self-baseline-last для случая, когда вам нужно выровнять только один элемент, а не все элементы в flex или grid контейнере.

Сохраняйте контент видимым с safe выравниванием

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

Новые утилиты выравнивания safe изменят выравнивание на start, когда контейнер начинает переполняться, так что он переполняется только в одном направлении.

<ul class="flex justify-center gap-2 ...">  <li>Продажи</li>  <li>Маркетинг</li>  <li>SEO</li>  <!-- ... --></ul>

<ul class="flex justify-center-safe gap-2 ...">  <li>Продажи</li>  <li>Маркетинг</li>  <li>SEO</li>  <!-- ... --></ul>

Эти утилиты работают с обоими макетами flex и grid и доступны для всех свойств выравнивания.

Игнорирование конкретных путей с @source not

Иногда вам нужно явно исключить некоторые части вашего кода из сканирования Tailwind. Теперь вы можете использовать @source not для игнорирования конкретных путей при сканировании для имен классов:

@import "tailwindcss";@source not "./src/components/legacy";

Это полезно, когда у вас много файлов в проекте, но вы хотите просканировать только определенный подмножество из них.

Safelist конкретных утилит с @source inline(…)

Если вам нужно убедиться, что Tailwind генерирует определенные имена классов, которые не существуют в ваших файлах содержимого, вы можете принудительно их генерировать, используя @source inline():

@import "tailwindcss";@source inline("underline");

.underline {  text-decoration: underline;}

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

Источник ввода является brace-expanded, поэтому вы можете генерировать несколько классов одновременно. Например, чтобы сгенерировать все оттенки красного с вариантами hover, вы можете добавить диапазон к входному источнику:

@import "tailwindcss";@source inline("{hover:,}bg-red-{50,{100..900..100},950}");

.bg-red-50 {  background-color: var(--color-red-50);}.bg-red-100 {  background-color: var(--color-red-100);}.bg-red-200 {  background-color: var(--color-red-200);}/* ... */.bg-red-800 {  background-color: var(--color-red-800);}.bg-red-900 {  background-color: var(--color-red-900);}.bg-red-950 {  background-color: var(--color-red-950);}@media (hover: hover) {  .hover\:bg-red-50:hover {    background-color: var(--color-red-50);  }  /* ... */  .hover\:bg-red-950:hover {    background-color: var(--color-red-950);  }}

Это создаст оттенки красного от 100 до 900 с шагом 100, а также 50 и 950 оттенки. Также добавляет hover: вариант для каждого из этих классов.

Вы также можете использовать @source inline() с модификатором not для исключения конкретных классов из генерации:

@import "tailwindcss";@source not inline("container");

Это специально предотвратит генерацию container класса, даже если слово container обнаруживается в ваших файлах источника.

Для получения дополнительной информации проверьте обнаружение классов в файлах источника документацию.

Куча других новых вариантов

Прекрасные аккордеоны с details-content

Хотя вы могли всегда добавлять стили к дочерним элементам <details> элемента, было невозможно стилизовать контейнер содержимого самого элемента.

Новый details-content вариант предназначен для контейнера содержимого, что полезно для позиционирования контейнера содержимого относительно <summary> элемента:

<details class="rounded-lg border border-transparent p-6 details-content:mt-3 details-content:-ml-0.5" open>  <summary class="text-sm leading-6 font-semibold text-gray-900 select-none dark:text-white">    Почему они называют это Ovaltine?  </summary>  <div class="border-gray-200 bg-gray-50 py-3 pl-3 dark:border-white/10 dark:bg-gray-800/50 ...">    <p>Кружка круглая. Банка круглая. Они должны называть это Roundtine.</p>  </div></details>

Нацеливание на режим inverted-colors

Используйте вариант inverted-colors для условного добавления стилей, когда пользователь включил инвертированную цветовую схему в своей ОС:

<div class="shadow-xl inverted-colors:shadow-none ...">  <!-- ... --></div>

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

Новый вариант noscript

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

<div class="hidden noscript:block">Пожалуйста, включите JavaScript для использования этого приложения.</div>

Вы могли бы уже сделать это с помощью <noscript> тега, но теперь вы можете сделать это с помощью CSS, что Tailwind позволяет вам писать в вашем HTML, так что… да.

Лучшая валидация форм с user-valid и user-invalid

Вы когда-нибудь пытались использовать псевдокласс :invalid только для того, чтобы страница была полной красными недействительными состояниями, прежде чем пользователь даже коснулся вашей формы?

Новые user-valid и user-invalid варианты пытаются решить эту проблему, применяя связанные стили только после того, как пользователь фактически взаимодействовал с элементами управления:

<input required class="border user-valid:border-green-500" /><input required class="border user-invalid:border-red-500" />

Так что это все, это Tailwind CSS v4.1! Обновитесь до последней версии, используя npm, и начните играть с ним сегодня:

npm install tailwindcss@latest @tailwindcss/cli@latest

npm install tailwindcss@latest @tailwindcss/vite@latest

npm install tailwindcss@latest @tailwindcss/postcss@latest

С нетерпением ждем того, что вы создадите с новыми функциями!