Making a ✨stacked✨ avatar list using maskImage. Works against any transparent background!! Using Tailwind CSS v4. Recorded and edited using

@tailwindcss it's such a minor detail but we all appreciate it when it's there 😅 reminds me that I need to finish the post for this one

@tailwindcss Not sure about the use-case but I converted your implementation into a utility class where you can control the width like with-outline-mask-2 with-outline-mask-8 with-outline-mask-4 Using `+` selector to "sync" the mask is pretty genius 🔥

@tailwindcss got tired of this in Figma, made a thing a while back, code in the thread

@tailwindcss Is it more easier to use ring for masking?

@tailwindcss Im not sure about that approach. Can you give me more clue/hint on what you mean? 👀

@tailwindcss This is the kind of thing where there’s a right way to build it and a working way… I’ve always done it using outlines with the same color as the background. Your solution is so much more elegant! Loved it!

@tailwindcss Here is a quick approach if your background is static color: body { --bg-color: #fff; } .cards { display: flex; } .card { margin-left: -20px; border: 10px solid var(--bg-color); border-radius: 100%; }

@tailwindcss Thanks! I appreciate it!

@tailwindcss Cakepp

@tailwindcss Keren 🔥

@tailwindcss thank you kak!