Я не был уверен, что это когда-нибудь произойдет, но мы сделали это — мы выпустили версию Tailwind CSS, которая включает утилиты для теней текста (text-shadow).
Tailwind CSS v4.1 уже здесь, и она наполнена новыми утилитами, вариантами и улучшениями для разработчиков, которые помогут вам (или вашей LLM, трусишка) создавать еще более качественные интерактивные интерфейсы.
Вот все самое лучшее, что вошло в этот релиз:
- Новые утилиты text-shadow-* — всего лишь спустя двадцать лет после того, как они впервые были поддержаны браузером.
- Маскирование элементов с помощью утилит mask-* — используйте изображения и градиенты для маскирования элементов с помощью новых эргономичных API.
- Улучшенная совместимость со старыми браузерами — мы сделали так, чтобы все работало гораздо корректнее в старых браузерах, продолжая при этом использовать современные возможности в браузерах, которые их поддерживают.
- Тонкая настройка переноса текста с помощью overflow-wrap — защитите целостность своих макетов даже от самых длинных немецких слов, которые могут встретиться у ваших пользователей.
- Поддержка цветных теней (drop-shadow) — уже не помню, почему у нас их не было раньше, но теперь они есть.
- Таргетинг на устройства ввода с помощью pointer-* и any-pointer-* — настраивайте дизайн для сенсорных устройств явно, вместо того чтобы полагаться на размер области просмотра.
- Выравнивание элементов по последней базовой линии — выравнивайте flex- или grid-элементы по базовой линии последней строки текста с помощью новых утилит items-baseline-last и self-baseline-last.
- Сохранение видимости контента с помощью безопасного выравнивания (safe alignment) — центрируйте контент в flex- и grid-макетах, чтобы он не исчезал, когда не хватает места.
- Игнорирование определенных путей с помощью @source not — явно исключайте ненужные большие директории и еще больше ускоряйте сборку.
- Добавление утилит в белый список с помощью @source inline(…) — заставьте Tailwind включить классы, которых нет в ваших исходных файлах.
- Множество других новых вариантов — включая noscript, user-valid, inverted-colors и другие.
Это все самое интересное, но в примечаниях к выпуску есть еще несколько мелочей, на которые вам стоит обратить внимание.
Обновите свои проекты, установив последнюю версию tailwindcss из npm:
Использование Tailwind CLI
Использование Vite
Использование PostCSS
Новые утилиты text-shadow-*
Мы грозились добавить тени для текста как минимум последние шесть лет, и сегодня они наконец-то здесь.
Мы добавили пять теней для текста в тему по умолчанию, от text-shadow-2xs до text-shadow-lg. Они особенно полезны для того, чтобы заголовки выделялись на фоне перегруженного фона:
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
Вы можете изменить цвет тени с помощью утилит text-shadow-<color>. Например, можно создать эффект тиснения, используя небольшую белую тень на темном тексте:
Если вы просто хотите настроить прозрачность тени текста, не меняя цвет, вы можете добавить модификатор прозрачности прямо к утилитам размера тени, например, text-shadow-lg.
Например, text-shadow-lg/50 — это то же самое, что одновременно задать text-shadow-lg и text-shadow-black/50:
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
Ознакомьтесь с документацией по text-shadow для получения подробной информации.
Маскирование элементов с помощью утилит mask-*
Одна из самых крутых функций современного CSS — это возможность использовать изображения и градиенты в качестве масок, по сути, используя прозрачность изображения, чтобы скрыть определенные части элемента:
Скорость
Создано для опытных пользователей
Работайте быстрее, чем когда-либо, с нашими сочетаниями клавиш
Поскольку вы можете использовать любое background-image в качестве маски, логичным шагом было скопировать утилиты bg-*, чтобы они использовали тот же API. Проблема такого подхода в том, что часто хочется комбинировать несколько масок, а утилиты bg-* не являются композиционными.
Поэтому мы создали новый набор утилит для работы с mask-image, которые являются композиционными и специально разработаны для задач маскирования. Например, вы можете использовать такие утилиты, как mask-b-from-<value> и mask-t-to-<value>, чтобы добавить линейный градиент-маску к одной стороне элемента:
mask-t-from-50%
mask-r-from-30%
mask-l-from-50% mask-l-to-90%
mask-b-from-20% mask-b-to-80%
Естественнее думать о том, какую сторону вы хотите замаскировать, чем пытаться вычислить точный градиент, который вам нужно использовать.
Утилиты градиентных масок также являются композиционными, поэтому вы можете комбинировать радиальные, конические и линейные градиенты для создания более сложных масок:
Маскирование — это очень мощная техника, и в API есть гораздо больше возможностей, чем мы можем здесь описать. Полный разбор новых утилит смотрите в документации.
Улучшенная совместимость со старыми браузерами
В Tailwind CSS v4.0 мы полностью сосредоточились на современных возможностях платформы, чтобы создать лучший фреймворк и обеспечить этой версии максимально долгий срок службы.
К сожалению, некоторые из этих функций очень плохо работают в старых браузерах, вплоть до того, что даже базовые вещи, такие как цвета и тени, могут вообще не отображаться у пользователя, зашедшего со старого iPhone или iPad, застрявшего на Safari 15.
Для Tailwind CSS v4.1 мы приложили много усилий, чтобы придумать и протестировать наши собственные фоллбэки (резервные варианты) на уровне фреймворка, чтобы ваши сайты отображались максимально хорошо в старых браузерах, даже если некоторые суперсовременные вещи все еще ведут себя не совсем так, как ожидается.
Вот список того, что нам удалось улучшить в этом релизе:
- Цвета, определенные в oklab, теперь отображаются в старых версиях Safari
- Функции, зависящие от пользовательских свойств, определенных с помощью @property (например, тени, трансформации, градиенты и многое другое), теперь работают в старых версиях Safari и Firefox
- Цвета с использованием модификатора прозрачности теперь отображаются с встроенными фоллбэками в старых браузерах
- Градиенты, использующие явные методы интерполяции, при отсутствии поддержки возвращаются к значениям по умолчанию браузера
Tailwind CSS v4 по-прежнему предназначен для современных браузеров, таких как Safari 16.4 и выше, и все еще зависит от множества современных функций для идеальной работы, но теперь ваши сайты будут отображаться и оставаться функциональными в старых браузерах, даже если в некоторых специфических ситуациях цвет тени может отличаться.
Чтобы узнать все, что вам нужно знать о совместимости браузеров в Tailwind CSS v4, вы можете прочитать полную документацию по совместимости браузеров.
Тонкая настройка переноса текста с помощью overflow-wrap
Новые утилиты overflow-wrap позволяют вам контролировать, как текст переносится внутри элемента. Утилита wrap-break-word особенно полезна для длинных слов или URL-адресов, которые в противном случае могли бы нарушить ваш макет:
Самое длинное слово в любом из основных словарей английского языка — pneumonoultramicroscopicsilicovolcanoconiosis, слово, обозначающее болезнь легких, возникающую при вдыхании очень мелких частиц кремнезема, в частности, из вулкана; с медицинской точки зрения это то же самое, что силикоз.
Единственный случай, когда это работает не совсем так, как вы ожидаете, — это внутри flex-контейнера, и именно там вам, вероятно, стоит использовать новую утилиту wrap-anywhere.
Это похоже на wrap-break-word, но позволяет делать переносы строк внутри слов при вычислении внутреннего размера элемента, устраняя необходимость задавать min-width: 0 дочернему элементу:
wrap-break-word
Jay Riemenschneider
jason.riemenschneider@vandelayindustries.com
wrap-anywhere
Jay Riemenschneider
jason.riemenschneider@vandelayindustries.com
В общем-то, это всё, но если хотите перечитать то же самое другими словами, вот документация по overflow-wrap.
Поддержка цветных падающих теней (drop-shadow)
Пока мы работали над поддержкой text-shadow, мы подумали, что неплохо бы добавить ещё одну функцию, до реализации которой у нас никак не доходили руки: цветные падающие тени.
Теперь вы можете использовать такие утилиты, как drop-shadow-indigo-500 и drop-shadow-cyan-500/50, чтобы изменить цвет падающей тени:
drop-shadow-cyan-500/50
drop-shadow-sky-500/50
drop-shadow-indigo-500/50
Тут больше особо нечего рассказывать, но вот вам на всякий случай документация по drop-shadow.
Таргетинг устройств ввода с помощью pointer-* и any-pointer-*
Новые варианты pointer-fine и pointer-coarse позволяют применять разные стили в зависимости от того, использует ли пользователь устройство с мышью или сенсорный экран.
Используйте pointer-fine для точных указателей вроде мыши и трекпада, и pointer-coarse для устройств с меньшей точностью, таких как сенсорные экраны:
Попробуйте эмулировать сенсорное устройство в инструментах разработчика, чтобы увидеть изменения
Если вы зашли с телефона, то увидите примененные стили pointer-coarse, которые делают интерактивные элементы крупнее и по ним проще попасть. Если вы за компьютером, применятся стили pointer-fine, делающие элементы меньше и точнее.
Варианты any-pointer-* работают точно так же, но вместо проверки только основного устройства ввода пользователя они проверяют, соответствует ли критериям любое из доступных устройств. Например, any-pointer-coarse сработает на ноутбуке с сенсорным экраном, даже если к нему подключена мышь.
Выравнивание элементов по последней базовой линии
При работе с макетами flex или grid иногда нужно выровнять элемент по базовой линии последней строки текста, а не по концу контейнера.
Новая утилита items-baseline-last делает именно это:
Spencer Sharp
Работаю над будущим найма космонавтов в Space Recruit.
spacerecruit.com
Мы также добавили self-baseline-last для случаев, когда нужно выровнять только один отдельный элемент, а не все элементы во flex- или grid-контейнере.
Сохранение видимости контента с помощью безопасного выравнивания (safe alignment)
Удавалось ли вам сталкиваться с ситуацией, когда содержимое с выравниванием по центру переполняло контейнер в обе стороны, если тот становился слишком маленьким? Теперь вам не нужно использовать запросы контейнеров (container queries), чтобы менять выравнивание при разных размерах.
Новые утилиты безопасного выравнивания изменят выравнивание на start при начале переполнения контейнера, так что он будет переполняться только в одну сторону.
Измените размер контейнера, чтобы увидеть поведение выравнивания
justify-center
justify-center-safe
Эти утилиты работают как с flexbox, так и с grid-макетами и доступны для всех свойств выравнивания.
Игнорирование определенных путей с помощью @source not
Иногда вам нужно явно исключить некоторые части вашей кодовой базы из сканирования Tailwind. Теперь вы можете использовать @source not, чтобы игнорировать определенные пути при поиске имен классов:
CSS
Это полезно, когда в вашем проекте очень много файлов, но вы хотите сканировать только определенный их поднабор.
Добавление конкретных утилит в белый список с помощью @source inline(…)
Если вам нужно убедиться, что Tailwind генерирует определенные классы, которых нет в ваших файлах контента, вы можете принудительно сгенерировать их с помощью @source inline():
CSS
Сгенерированный CSS
Это эквивалент конфигурационной опции safelist в предыдущих версиях Tailwind, но теперь ее можно использовать прямо в CSS-файлах вместо файла конфигурации.
Входные данные source поддерживают расширение фигурных скобок (brace expansion), поэтому вы можете генерировать несколько классов одновременно. Например, чтобы сгенерировать все оттенки красного с вариантами hover, вы можете добавить диапазон во входные данные source:
CSS
Сгенерированный CSS
Это сгенерирует оттенки красного от 100 до 900 с шагом 100, а также оттенки 50 и 950. Кроме того, это добавляет вариант hover: для каждого из этих классов.
Вы также можете использовать @source inline() с модификатором not, чтобы исключить генерацию определенных классов:
CSS
Это конкретно запретит генерацию класса container, даже если слово container будет обнаружено в ваших исходных файлах.
Для получения подробной информации ознакомьтесь с документацией по обнаружению классов в исходных файлах.
Куча других новых вариантов
Более аккуратные аккордеоны с details-content
Хотя вы всегда могли добавлять стили к дочерним элементам тега <details>, стилизовать сам контейнер содержимого было невозможно.
Новый вариант details-content нацелен на контейнер содержимого, что полезно для позиционирования этого контейнера относительно элемента <summary>:
Чашка круглая. Банка круглая. И почему это не называют «круглышом»?
Таргетинг режима инвертированных цветов
Используйте вариант inverted-colors для условного добавления стилей, когда пользователь включил схему инвертированных цветов в своей ОС:
Это полезно, например, для предотвращения превращения черных теней в белые при включении инверсии цветов.
Новый вариант noscript
Да, некоторые люди отключают JavaScript, и теперь вы можете сказать им, что ваше приложение без него не работает. Вариант noscript позволяет условно применять стили при отключенном JS:
Вы уже могли делать это с помощью тега <noscript>, но теперь вы можете делать это и с помощью CSS, который Tailwind позволяет писать прямо в HTML, так что… да.
Лучшая валидация форм с user-valid и user-invalid
Вы когда-нибудь пробовали использовать псевдокласс :invalid, из-за чего страница сразу после загрузки оказывалась залита красными состояниями ошибки, прежде чем пользователь вообще успел коснуться вашей формы?
Новые варианты user-valid и user-invalid пытаются решить эту проблему, применяя стили, связанные с валидацией, только после того, как пользователь действительно по взаимодействовал с элементами управления:
Вот и всё, это Tailwind CSS v4.1! Обновитесь до последней версии с помощью npm и начните экспериментировать уже сегодня:
Использование Tailwind CLI
Использование Vite
Использование PostCSS
С нетерпением ждем возможности увидеть, что вы создадите с помощью новых функций!
