Загрузка видео...

Не удалось загрузить видео

На главную

Progress on `mask-image` support for Tailwind CSS v4.1… 🍿

adamwathan's profile picture

Adam Wathan

291,313 subscribers

106,319 просмотров • 1 год назад •via X (Twitter)

Наука и технологии
LIVE

Anya Rossi• Live Now

Private livecam show

Комментарии: 10

Фото профиля Adam Wathan
Adam Wathan1 год назад

Here's the demo if you want to poke around — whole feature was prototyped directly in Tailwind Play using our CSS APIs ✨

Фото профиля Kevin Grajeda
Kevin Grajeda1 год назад

This type of composition is why I love Tailwind 👌

Фото профиля Ry ⭐ (h/acc)
Ry ⭐ (h/acc)1 год назад

It’s incredible to see a person type their own code in this day and age. Feels like the late 1900s. Good on you for keeping the ancient craft alive.

Фото профиля Alex ElChehimi
Alex ElChehimi1 год назад

The more masks you add the cooler the effect

Фото профиля David Hill
David Hill1 год назад

So so good!

Фото профиля Tim Gavin
Tim Gavin1 год назад

holy crimoly 🤯

Фото профиля DevOnFence
DevOnFence1 год назад

Love this!! Anyway to configure it to make image dark/light driven?

Фото профиля Bilal
Bilal1 год назад

really cool!

Фото профиля Caleb Porzio
Caleb Porzio1 год назад

lovely

Фото профиля Alex Barashkov
Alex Barashkov1 год назад

Superb!

Похожие видео

✨ We tagged Tailwind CSS v4.1! 🎭 New masking utilities 🫣 Text shadows (!) 🫂 Improved browser compatibility …and tons more — check it out:
12:04

✨ We tagged Tailwind CSS v4.1! 🎭 New masking utilities 🫣 Text shadows (!) 🫂 Improved browser compatibility …and tons more — check it out:

Adam Wathan

140,090 просмотров • 1 год назад

This week, Gabriel Perales 🤓 and I worked together on a tool for Tailwind CSS users. The tool lets you easily create grids for your Tailwind CSS projects, perfect for generating bento-style grids! It supports Tailwind CSS v3/v4 —
1:08

This week, Gabriel Perales 🤓 and I worked together on a tool for Tailwind CSS users. The tool lets you easily create grids for your Tailwind CSS projects, perfect for generating bento-style grids! It supports Tailwind CSS v3/v4 —

Michael Andreuzza

69,278 просмотров • 1 год назад

i wasn't aware of `animation-timeline` css property if I be honest. with it you can use css `scroll()` function to tie an animation with the scroll progress of a scrollable element. here im animating a `mask-image`s size based on the scroll progress with `2rem` of threshold.
0:34

i wasn't aware of `animation-timeline` css property if I be honest. with it you can use css `scroll()` function to tie an animation with the scroll progress of a scrollable element. here im animating a `mask-image`s size based on the scroll progress with `2rem` of threshold.

Soren

183,803 просмотров • 7 месяцев назад

Quick demo of JS config file support and plugin support in the latest Tailwind CSS v4 alpha 🫣
6:27

Quick demo of JS config file support and plugin support in the latest Tailwind CSS v4 alpha 🫣

Adam Wathan

91,473 просмотров • 1 год назад

Product Launch 📢✨ Introducing "Tailwind CSS Notion Handbook" ↳ Tailwind CSS Basics ↳ 30 Tailwind CSS Tips ↳ 10 Bonus Tips ↳ Production Checklist ↳ UI Kits & Templates ↳ 20+ Tools & Resources Launch Price: $9 for 24 hours ⏰ Code: LAUNCH75 👉
0:31

Product Launch 📢✨ Introducing "Tailwind CSS Notion Handbook" ↳ Tailwind CSS Basics ↳ 30 Tailwind CSS Tips ↳ 10 Bonus Tips ↳ Production Checklist ↳ UI Kits & Templates ↳ 20+ Tools & Resources Launch Price: $9 for 24 hours ⏰ Code: LAUNCH75 👉

Surjith S M ✪

93,727 просмотров • 3 лет назад

🔥 CSS: Use gradients with mask-image to fade out parts of an element
0:51

🔥 CSS: Use gradients with mask-image to fade out parts of an element

Wes Bos

86,100 просмотров • 3 лет назад

It's finally here! Untitled UI React is live ✨ Untitled UI React is the world’s largest collection of open-source React components built with Tailwind CSS v4.1 and React Aria. Just copy, paste, and build. 👇
1:02

It's finally here! Untitled UI React is live ✨ Untitled UI React is the world’s largest collection of open-source React components built with Tailwind CSS v4.1 and React Aria. Just copy, paste, and build. 👇

Jordan Hughes

243,721 просмотров • 10 месяцев назад

Tailwind Tip #5 ✨ You can use ":invalid" pseudo class to create a pure css Tailwind CSS form validation without javascript. View code 👇 (5/30) follow for 25 more tips 😊
0:24

Tailwind Tip #5 ✨ You can use ":invalid" pseudo class to create a pure css Tailwind CSS form validation without javascript. View code 👇 (5/30) follow for 25 more tips 😊

Surjith S M ✪

169,272 просмотров • 3 лет назад

Underrated: seed v0 generations from image models. I gave a source image from the Black Forest Labs FLUX.1 model. It implemented animations, responsiveness, copy, gradients. The phone in the image was implemented in pure CSS / Tailwind.
0:28

Underrated: seed v0 generations from image models. I gave a source image from the Black Forest Labs FLUX.1 model. It implemented animations, responsiveness, copy, gradients. The phone in the image was implemented in pure CSS / Tailwind.

Guillermo Rauch

19,555 просмотров • 1 год назад

Released a new Tailwind CSS template today 🫣
0:50

Released a new Tailwind CSS template today 🫣

Adam Wathan

180,193 просмотров • 2 лет назад

Calendar built from scratch ↓ → Next.js hosted on Vercel → Tailwind CSS for styling → shadcn for beautiful and accessible components → nuqs for URL-based state management
0:26

Calendar built from scratch ↓ → Next.js hosted on Vercel → Tailwind CSS for styling → shadcn for beautiful and accessible components → nuqs for URL-based state management

João Melo

16,531 просмотров • 1 год назад

Using CSS mask-image you can truncate texts with a smooth fade effect. It looks clean and it's a great alternative to text ellipsis. .text-container { overflow: hidden; white-space: nowrap; -webkit-mask-image: linear-gradient( to right, black 50%, transparent); mask-image: linear-gradient( to right, black 50%, transparent); } } If you found this one useful, follow for more! ❤️
0:21

Using CSS mask-image you can truncate texts with a smooth fade effect. It looks clean and it's a great alternative to text ellipsis. .text-container { overflow: hidden; white-space: nowrap; -webkit-mask-image: linear-gradient( to right, black 50%, transparent); mask-image: linear-gradient( to right, black 50%, transparent); } } If you found this one useful, follow for more! ❤️

Ali

13,163 просмотров • 12 дней назад

✨ Tailwind CSS v4.0 is here! Huge performance improvements, radically simplified setup experience, CSS-first configuration, modernized P3 color palette, container queries, 3D transforms, expanded gradient APIs, @​starting-style support… …and tons, tons more.
0:20

✨ Tailwind CSS v4.0 is here! Huge performance improvements, radically simplified setup experience, CSS-first configuration, modernized P3 color palette, container queries, 3D transforms, expanded gradient APIs, @​starting-style support… …and tons, tons more.

Adam Wathan

506,097 просмотров • 1 год назад

Little whirlwind tour of some theme customization workflows in Tailwind CSS v4 🌪️
0:38

Little whirlwind tour of some theme customization workflows in Tailwind CSS v4 🌪️

Adam Wathan

65,392 просмотров • 2 лет назад

Here is how I made the ✨shiny✨ hover effect using Tailwind CSS.
2:40

Here is how I made the ✨shiny✨ hover effect using Tailwind CSS.

Alfon

71,117 просмотров • 1 год назад

Created this fully "accessible" dropdown using pure Tailwind CSS 🤩 × No javascript × No custom styles Can you guess which CSS property is this?
0:21

Created this fully "accessible" dropdown using pure Tailwind CSS 🤩 × No javascript × No custom styles Can you guess which CSS property is this?

Surjith S M ✪

169,676 просмотров • 3 лет назад

Oxfmt is in beta for a month now! 🎉 ◆ 100% Prettier conformance for JS/TS ◆ Seamless migration from Prettier via command ◆ Stable import sorting & Tailwind CSS support ◆ and more! Are you using it already? What is your favorite feature?
1:09

Oxfmt is in beta for a month now! 🎉 ◆ 100% Prettier conformance for JS/TS ◆ Seamless migration from Prettier via command ◆ Stable import sorting & Tailwind CSS support ◆ and more! Are you using it already? What is your favorite feature?

VoidZero

19,096 просмотров • 2 месяцев назад

Tailwind v4 killed the config file 😳 Now, it's just CSS variables. Here's why that's awesome
0:59

Tailwind v4 killed the config file 😳 Now, it's just CSS variables. Here's why that's awesome

Ben Holmes

86,900 просмотров • 1 год назад

🔥 Tailwind CSS Workshop Alert 🔥 📢 Announcing **Pixel Perfect Figma to Tailwind**, a 1-day online workshop. 📅 **Thursday 7th March 2024** 🎫 Tickets link in reply
1:53

🔥 Tailwind CSS Workshop Alert 🔥 📢 Announcing **Pixel Perfect Figma to Tailwind**, a 1-day online workshop. 📅 **Thursday 7th March 2024** 🎫 Tickets link in reply

Simon Vrachliotis

113,764 просмотров • 2 лет назад

🌟 Discover the ultimate Tailwind hack! I'm using an amazing Eslint plugin that streamlines your Tailwind CSS code for cleaner, more consistent results. Learn as you code, with intelligent shorthands and organized structure. ▶️ Link: #buildinpublic
0:49

🌟 Discover the ultimate Tailwind hack! I'm using an amazing Eslint plugin that streamlines your Tailwind CSS code for cleaner, more consistent results. Learn as you code, with intelligent shorthands and organized structure. ▶️ Link: #buildinpublic

Kristoffer Eriksson

37,437 просмотров • 2 лет назад