🎉 Tailwind CSS v4.1 — тени, маски и удобства для вёрстки
Tailwind обновился до версии 4.1. Формально — минорный апдейт, но на деле получил кучу полезных штук. Особенно для тех, кто много работает с UI и адаптивностью.
Вот что появилось:
✨ Текстовые тени
Добавили text-shadow
с 5 размерами (2xs
→ lg
).
Поддерживаются цветные тени, например: text-shadow-blue-500/50
📌 Удобно для заголовков и эффекта тиснения — белая полупрозрачная тень + тёмный текст.
🎭 CSS-маски
Новые утилиты mask-*
для линейных, радиальных и конических градиентов.
Пример: mask-t-from-50%
— плавное затемнение сверху.
Можно комбинировать несколько масок.
🧵 Новый контроль переноса
Появились:
- wrap-normal
- wrap-break-word
- wrap-anywhere
Особенно полезно в flex
и grid
, где раньше длинные строки могли ломать вёрстку.
🌈 Цветной drop-shadow
Теперь drop-shadow
можно раскрашивать: drop-shadow-xl drop-shadow-indigo-500/50
Работает как фильтр, создаёт мягкое цветное свечение.
📱 Указатели: coarse / fine
Появились префиксы pointer-coarse
, pointer-fine
и any-pointer-*
.
Полезно для адаптации интерфейса под тач или мышку:
<button class="px-3 py-1 pointer-coarse:px-5 pointer-coarse:py-3">Кнопка</button>
🧮 Выравнивание по последней строке
items-baseline-last
и self-baseline-last
— выравнивают по последней строке текста. Актуально для карточек, чатов и типографики.
🛟 Безопасное центрирование
justify-center-safe
, items-center-safe
— если контент не влезает, он смещается влево, а не обрезается.💻 Поддержка старых браузеров
Работает корректно на Safari 15 и старом Firefox:
- fallback для OKLCH
- отключение
@property
, если не поддерживается - корректная деградация теней и градиентов
🧾 @source inline — для safelist в CSS
Можно подключать классы прямо в CSS:
@source inline("text-red-500 lg:bg-blue-100");
🔄 Другие полезности
-
noscript:
— для стилей без JS -
user-valid:
и user-invalid:
— UX-дружественная валидация -
details-content:
— для <details>
-
inverted-colors:
— для системной инверсии🧩 Вывод
Tailwind 4.1 — не про революцию, а про удобные детали, которые приятно использовать.
Обновляться можно без страха — всё совместимо ✅
CutCode
>>Click here to continue<<
