TGViewer
Новости от CutCode Новости от CutCode @laravel_cutcode · 1.35K subscribers
Post #722 851
🎉 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
Telegram Новости от CutCode Новости и полезные материалы по web-разработке на PHP от CutCode . Общаемся тут AI - @ai_chat_cutcode L - @laravel_chat S - @symfony_cutcode Чем могу быть полезен - https://teletype.in/@cutcode/hello
  • 🔥 11
  • ❤ 3
More from @laravel_cutcode
  1. Sep 9, 2026Пыхник’26 — целая неделя PHP! С 28 сентября по 2 октября пройдёт Пыхник’26 — онлайн-конфер…
  2. Sep 3, 2026Опа, Тейлор Отвелл говорит, что issues — это уже что-то из мира динозавров 😄 Нашли баг? Н…
  3. Sep 1, 2026Пыхник’26. План «Б» Итак, мы продолжаем делать Пыхник, но теперь полностью онлайн! 📆 Сдви…
  4. Aug 20, 2026Стрим, посвященный Open source в эпоху LLM Мы в эфире! Подключайтесь! https://youtube.com/…
  5. Aug 19, 2026Стрим, посвященный Open source в эпоху LLM LLM пишут код, делают ревью, поддерживают докум…
  6. Jul 21, 2026До конца сбора на Пыхник осталось 4️⃣ дня! Для тех, кто вдруг пропустил: мы готовим целую…
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →