Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

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

adamwathan's profile picture

Adam Wathan

292,199 subscribers

106,325 Aufrufe • vor 1 Jahr •via X (Twitter)

Wissenschaft & Technologie
LIVE

Anya Rossi• Live Now

Private livecam show

10 Kommentare

Profilbild von Adam Wathan
Adam Wathanvor 1 Jahr

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

Profilbild von Kevin Grajeda
Kevin Grajedavor 1 Jahr

This type of composition is why I love Tailwind 👌

Profilbild von Ry ⭐ (h/acc)
Ry ⭐ (h/acc)vor 1 Jahr

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.

Profilbild von Alex ElChehimi
Alex ElChehimivor 1 Jahr

The more masks you add the cooler the effect

Profilbild von David Hill
David Hillvor 1 Jahr

So so good!

Profilbild von Tim Gavin
Tim Gavinvor 1 Jahr

holy crimoly 🤯

Profilbild von DevOnFence
DevOnFencevor 1 Jahr

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

Profilbild von Bilal
Bilalvor 1 Jahr

really cool!

Profilbild von Caleb Porzio
Caleb Porziovor 1 Jahr

lovely

Profilbild von Alex Barashkov
Alex Barashkovvor 1 Jahr

Superb!

Ähnliche Videos

✨ 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 Aufrufe • vor 1 Jahr

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 Aufrufe • vor 1 Jahr

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 Aufrufe • vor 7 Monaten

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 Aufrufe • vor 1 Jahr

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 Aufrufe • vor 3 Jahren

🔥 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 Aufrufe • vor 3 Jahren

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 Aufrufe • vor 10 Monaten

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 Aufrufe • vor 3 Jahren

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 Aufrufe • vor 1 Jahr

Released a new Tailwind CSS template today 🫣
0:50

Released a new Tailwind CSS template today 🫣

Adam Wathan

180,193 Aufrufe • vor 2 Jahren

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 Aufrufe • vor 1 Jahr

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 Aufrufe • vor 16 Tagen

✨ 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,141 Aufrufe • vor 1 Jahr

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 Aufrufe • vor 2 Jahren

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 Aufrufe • vor 1 Jahr

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 Aufrufe • vor 3 Jahren

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 Aufrufe • vor 2 Monaten

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 Aufrufe • vor 1 Jahr

🌟 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 Aufrufe • vor 2 Jahren

🔥 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 Aufrufe • vor 2 Jahren