正在加载视频...

视频加载失败

返回首页

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

adamwathan's profile picture

Adam Wathan

292,199 subscribers

106,325 次观看 • 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,370 次观看 • 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,293 次观看 • 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,557 次观看 • 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,219 次观看 • 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 年前

✨ 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,159 次观看 • 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,338 次观看 • 17 天前

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 年前

🌟 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 年前

🔥 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 年前