Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

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 Aufrufe • vor 1 Jahr •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

10 Kommentare

Profilbild von Manikanta Srivishnu(msv)
Manikanta Srivishnu(msv)vor 1 Jahr

@tailwindcss do you make a tailwind course?

Profilbild von Tony Lea
Tony Leavor 1 Jahr

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

Profilbild von Shruti Balasa
Shruti Balasavor 1 Jahr

@tailwindcss Super cool!!

Profilbild von Tony Lea
Tony Leavor 1 Jahr

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

Profilbild von Radek Podrázký 🇨🇿
Radek Podrázký 🇨🇿vor 1 Jahr

@tailwindcss Looks awesome. Mind you share the code?

Profilbild von Tony Lea
Tony Leavor 1 Jahr

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

Profilbild von @iprodan.dev 🦋
@iprodan.dev 🦋vor 1 Jahr

@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 👍

Profilbild von Morgan Linton (hiring)
Morgan Linton (hiring)vor 1 Jahr

@tailwindcss Love it - sooooo clean ✨

Profilbild von psycarlo 🍷⚡️
psycarlo 🍷⚡️vor 1 Jahr

@tailwindcss This is quite huge, ngl

Profilbild von Saïd Aitmbarek
Saïd Aitmbarekvor 1 Jahr

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

Ähnliche 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

535,016 Aufrufe • vor 3 Monaten

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

26,782 Aufrufe • vor 3 Monaten

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

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

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