Loading video...

Video Failed to Load

Go Home

Having a fun Saturday morning playing with Tailwind CSS v4 Beta 😊 Here are a few cool new things you can do: 🪄 CSS only modals 🎨 Starting style variants 🪟 Perspective transforms

tnylea's profile picture

Tony Lea

7,882 subscribers

52,132 views • 1 year ago •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

10 Comments

Manikanta Srivishnu(msv)'s profile picture
Manikanta Srivishnu(msv)1 year ago

@tailwindcss do you make a tailwind course?

Tony Lea's profile picture
Tony Lea1 year ago

@tailwindcss I don’t, but maybe I will 🤔

Shruti Balasa's profile picture
Shruti Balasa1 year ago

@tailwindcss Super cool!!

Tony Lea's profile picture
Tony Lea1 year ago

@tailwindcss Thanks Shruti 🙏 Dig all your stuff as well ☺️

Radek Podrázký 🇨🇿's profile picture
Radek Podrázký 🇨🇿1 year ago

@tailwindcss Looks awesome. Mind you share the code?

Tony Lea's profile picture
Tony Lea1 year ago

@tailwindcss Sure thing 😉 threw it up on a repo here:

@iprodan.dev 🦋's profile picture
@iprodan.dev 🦋1 year ago

@tailwindcss Idk, tailwind is awesome , but everyone who’s using these new css animations for the first time, should do them “manually”, to understand what is what. Cool video though 👍

Morgan Linton (hiring)'s profile picture
Morgan Linton (hiring)1 year ago

@tailwindcss Love it - sooooo clean ✨

psycarlo 🍷⚡️'s profile picture
psycarlo 🍷⚡️1 year ago

@tailwindcss This is quite huge, ngl

Saïd Aitmbarek's profile picture
Saïd Aitmbarek1 year ago

@tailwindcss really cool modal 3d effect, is that part of the new tailwind anim commands?

Related Videos

Introducing HeroUI v3 🔥 A complete rewrite for React. A brand-new library for React Native. 🌐 Web → 75+ components, 21 new 📱 Native → 37+ components, built from scratch 🎨 Styling → Tailwind CSS v4, CSS variables, OKLCH, BEM ⚡ Performance → CSS animations, no JS runtime ♿ Accessibility → React Aria Components 🧩 Architecture → Compound components, headless-ready 🤖 AI → MCP Server, Agent Skills, LLMs.txt 📎 Figma Kit v3 with 1:1 component parity One design system. Beautiful everywhere.
1:15

Introducing HeroUI v3 🔥 A complete rewrite for React. A brand-new library for React Native. 🌐 Web → 75+ components, 21 new 📱 Native → 37+ components, built from scratch 🎨 Styling → Tailwind CSS v4, CSS variables, OKLCH, BEM ⚡ Performance → CSS animations, no JS runtime ♿ Accessibility → React Aria Components 🧩 Architecture → Compound components, headless-ready 🤖 AI → MCP Server, Agent Skills, LLMs.txt 📎 Figma Kit v3 with 1:1 component parity One design system. Beautiful everywhere.

HeroUI

538,731 views • 4 months ago

🔥 Tailwind Tip 🔥 Create a "color background split" effect with CSS Grid. It greatly simplifies the spacing adjustment gymnastics you need to do when using transforms to translate your element across both sections ✨
2:19

🔥 Tailwind Tip 🔥 Create a "color background split" effect with CSS Grid. It greatly simplifies the spacing adjustment gymnastics you need to do when using transforms to translate your element across both sections ✨

Simon Vrachliotis

127,870 views • 3 years ago

What's the latest with React Native? Reanimated 4 brings a more declarative, CSS-style approach to animations and transitions. ✨ We break down what you can do with this new API. ▶️
0:34

What's the latest with React Native? Reanimated 4 brings a more declarative, CSS-style approach to animations and transitions. ✨ We break down what you can do with this new API. ▶️

GitHub

28,617 views • 11 months ago

Ready for the first cool demo of the year? A mini Mario world with keyboard control. Yes, you can move Mario and also jump! 👀 Demo: via CodePen.IO ✔️ 100% CSS Magic ✔️ Minimal HTML ❌ 0% JavaScript A Chrome-only experimentation using modern CSS.
0:25

Ready for the first cool demo of the year? A mini Mario world with keyboard control. Yes, you can move Mario and also jump! 👀 Demo: via CodePen.IO ✔️ 100% CSS Magic ✔️ Minimal HTML ❌ 0% JavaScript A Chrome-only experimentation using modern CSS.

CSS by T. Afif

36,412 views • 7 months ago

It’s here. Beautifully designed components built with Radix UI and Tailwind CSS. A collection of accessible and customizable components that you can copy and paste into your apps. Free. Open Source. And Next.js 13 Ready.
0:29

It’s here. Beautifully designed components built with Radix UI and Tailwind CSS. A collection of accessible and customizable components that you can copy and paste into your apps. Free. Open Source. And Next.js 13 Ready.

shadcn

667,116 views • 3 years ago

1️⃣ - When a UI library gets popular, every app starts to look the same. How do we solve this? Introducing Styles. A new approach for shipping UI components. Start with Radix UI and Tailwind CSS. Add a style, including shapes, icons & animations. Apply your colors. ⬇️
0:25

1️⃣ - When a UI library gets popular, every app starts to look the same. How do we solve this? Introducing Styles. A new approach for shipping UI components. Start with Radix UI and Tailwind CSS. Add a style, including shapes, icons & animations. Apply your colors. ⬇️

shadcn

531,969 views • 3 years ago

There are few things I dislike more than politics. So if you are like me, here’s a break from politics - a video of me having some fun with our Cybertruck in a snowstorm this evening 😊
1:02

There are few things I dislike more than politics. So if you are like me, here’s a break from politics - a video of me having some fun with our Cybertruck in a snowstorm this evening 😊

Mike’s EV Garage

43,598 views • 1 year ago

Pretty impressive that you can do it without JavaScript with this new CSS API heres a quick tutorial on how to code the iPad video scroller mask effect yourself
6:51

Pretty impressive that you can do it without JavaScript with this new CSS API heres a quick tutorial on how to code the iPad video scroller mask effect yourself

Wes Bos

222,790 views • 2 years ago

Here are a few ideas for things that you can do instead of working on your research.
0:39

Here are a few ideas for things that you can do instead of working on your research.

PhD_Genie

92,353 views • 2 years ago

Rufus playing with a dog biscuit. There are few things more joyful than watching wild animals play. Their lives can be so hard at times, so it's lovely to see them just having fun
0:20

Rufus playing with a dog biscuit. There are few things more joyful than watching wild animals play. Their lives can be so hard at times, so it's lovely to see them just having fun

Urban Fox Watcher🦊

27,876 views • 9 months ago

If you’re learning a tech skill in 2025, here are a few things I feel you can do differently❤️
1:08

If you’re learning a tech skill in 2025, here are a few things I feel you can do differently❤️

Chisom Nwokwu🌟

14,717 views • 1 year ago

You can create CSS-only scroll indicators without new APIs 🤙 .scroller { background: var(--cover) local, var(--shadow) scroll; } background-attachment: local makes a background scroll with its content. Use that to cover a shadow ⭐️ Neat little trick! 🫶
0:24

You can create CSS-only scroll indicators without new APIs 🤙 .scroller { background: var(--cover) local, var(--shadow) scroll; } background-attachment: local makes a background scroll with its content. Use that to cover a shadow ⭐️ Neat little trick! 🫶

jhey ʕ•ᴥ•ʔ

91,561 views • 2 years ago

The only person having more fun than me playing this par 5 is your dad playing with his new bidet 🤷‍♀️ On a related note… Do I need a new putter or do I just suck at putting? #GolfSwing #golftips #golfjokes
0:32

The only person having more fun than me playing this par 5 is your dad playing with his new bidet 🤷‍♀️ On a related note… Do I need a new putter or do I just suck at putting? #GolfSwing #golftips #golfjokes

The Fit Golfer Girl

11,484 views • 1 year ago

Hey everyone, having a great morning. I hope you are too. Just having a wonderful morning love you all. There’s a new Carmel Machi with chocolate brownie in it coffee so delicious. Have a great day.!!! ☀️😊❤️❤️❤️❤️❤️
0:59

Hey everyone, having a great morning. I hope you are too. Just having a wonderful morning love you all. There’s a new Carmel Machi with chocolate brownie in it coffee so delicious. Have a great day.!!! ☀️😊❤️❤️❤️❤️❤️

Patricia Marie Krentcil

15,079 views • 6 months ago

Introducing Prism Templates ✨ Ready to use pages for your application built on shadcn and run on Next.js How it works: ◆ Go to Prism UI ◆ Download templates ◆ Run and edit your new website I have wanted to make something like this for everyone for a while, hope you like it 🪄 What is under the hood: ⚡️ Next.js 15 with App Router 🎨 Tailwind CSS for styling 📦 Shadcn UI components 🔒 TypeScript for type safety 🎯 ESLint & Biome for code formatting 🚀 Optimized for SEO 🌓 Dark mode support 📱 Responsive design 🔥 Modern and clean UI Tech Stack: Vercel shadcn Framer Tailwind CSS v0 Matt Perry Biome #opensource #buildinpublic
0:20

Introducing Prism Templates ✨ Ready to use pages for your application built on shadcn and run on Next.js How it works: ◆ Go to Prism UI ◆ Download templates ◆ Run and edit your new website I have wanted to make something like this for everyone for a while, hope you like it 🪄 What is under the hood: ⚡️ Next.js 15 with App Router 🎨 Tailwind CSS for styling 📦 Shadcn UI components 🔒 TypeScript for type safety 🎯 ESLint & Biome for code formatting 🚀 Optimized for SEO 🌓 Dark mode support 📱 Responsive design 🔥 Modern and clean UI Tech Stack: Vercel shadcn Framer Tailwind CSS v0 Matt Perry Biome #opensource #buildinpublic

CodeHagen

16,295 views • 1 year ago

Thank you so much to everyone who came to my new outfit debut!! I had so much fun!! Here are a few cool things I can do with my new model!! I'm so excited to use the gun tracking during fps games!! Thank you so much to my wonderful mama WERI , and my amazing genmate and rigger Namiji Freesia ⛲ ナミジ・フリージア【novamore】 !! 💕💕💕💕
1:54

Sensitive content

Thank you so much to everyone who came to my new outfit debut!! I had so much fun!! Here are a few cool things I can do with my new model!! I'm so excited to use the gun tracking during fps games!! Thank you so much to my wonderful mama WERI , and my amazing genmate and rigger Namiji Freesia ⛲ ナミジ・フリージア【novamore】 !! 💕💕💕💕

Shee Icho 🐶☕️ Vtuber

27,268 views • 4 months ago

Many things can lead to stress. Challenging situations and positive life changes can make us struggle 💚 Whatever is causing you stress, here are a few things you can do to feel less tense 👉 #StressManagement
0:32

Many things can lead to stress. Challenging situations and positive life changes can make us struggle 💚 Whatever is causing you stress, here are a few things you can do to feel less tense 👉 #StressManagement

Mental Health Foundation

16,146 views • 3 years ago

CSS variables are live and they are POWERFUL. Now Live on Product Hunt 🚀 ➡️ Create a design system "So you can stay consistent and build much quicker." Define global styles like colors, gradients, sizes, and box shadows. ➡️ Use your variables everywhere "So you never have to manually enter a border color again." You're not limited to just sizes, colors, and font families. Use variables in gradients, box shadows, transforms, and more! ➡️ Start with libraries like Open Props, expertly crafted CSS variables "So you can use a tried and true system, and so we can standardize our Projects." Because there are no abstractions, you can use existing CSS variable libraries like Open Props, an expertly crafted library of CSS variables, and the recommended starting point in Webstudio. ➡️ Create complex micro-interactions "So when you hover a link, you can change any children's styles." CSS variables go beyond reusability! You can define variables anywhere in the navigator, such as on a link, and modify the variables on hover. Then, you can use those variables on the children to create complex micro-interactions! ➡️ Design and build simultaneously "So when deciding that perfect border color, you can arrow through all your options." Experimenting on the canvas just got a whole lot better. Now, you can arrow through your variables and see them rendered on the canvas to see which works best. ➡️ Change variable by breakpoint "So you can make the variables look great, no matter the screen size." CSS variables in Webstudio use the same UI as the rest of your styles, enabling breakpoints to work the same way. ✨ Building with design systems gives a HUGE boost in speed, consistency, and maintainability.
2:55

CSS variables are live and they are POWERFUL. Now Live on Product Hunt 🚀 ➡️ Create a design system "So you can stay consistent and build much quicker." Define global styles like colors, gradients, sizes, and box shadows. ➡️ Use your variables everywhere "So you never have to manually enter a border color again." You're not limited to just sizes, colors, and font families. Use variables in gradients, box shadows, transforms, and more! ➡️ Start with libraries like Open Props, expertly crafted CSS variables "So you can use a tried and true system, and so we can standardize our Projects." Because there are no abstractions, you can use existing CSS variable libraries like Open Props, an expertly crafted library of CSS variables, and the recommended starting point in Webstudio. ➡️ Create complex micro-interactions "So when you hover a link, you can change any children's styles." CSS variables go beyond reusability! You can define variables anywhere in the navigator, such as on a link, and modify the variables on hover. Then, you can use those variables on the children to create complex micro-interactions! ➡️ Design and build simultaneously "So when deciding that perfect border color, you can arrow through all your options." Experimenting on the canvas just got a whole lot better. Now, you can arrow through your variables and see them rendered on the canvas to see which works best. ➡️ Change variable by breakpoint "So you can make the variables look great, no matter the screen size." CSS variables in Webstudio use the same UI as the rest of your styles, enabling breakpoints to work the same way. ✨ Building with design systems gives a HUGE boost in speed, consistency, and maintainability.

Webstudio

15,496 views • 1 year ago

What can I say, it was a cronchy marshmallow. Still playing around with the new controls, having fun as I do. Song is mine, I call it Retuge.
0:22

What can I say, it was a cronchy marshmallow. Still playing around with the new controls, having fun as I do. Song is mine, I call it Retuge.

LayzuhCatz

506,332 views • 2 years ago