正在加载视频...

视频加载失败

返回首页

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 次观看 • 1 年前 •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

10 条评论

Manikanta Srivishnu(msv) 的头像
Manikanta Srivishnu(msv)1 年前

@tailwindcss do you make a tailwind course?

Tony Lea 的头像
Tony Lea1 年前

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

Shruti Balasa 的头像
Shruti Balasa1 年前

@tailwindcss Super cool!!

Tony Lea 的头像
Tony Lea1 年前

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

Radek Podrázký 🇨🇿 的头像
Radek Podrázký 🇨🇿1 年前

@tailwindcss Looks awesome. Mind you share the code?

Tony Lea 的头像
Tony Lea1 年前

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

@iprodan.dev 🦋 的头像
@iprodan.dev 🦋1 年前

@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) 的头像
Morgan Linton (hiring)1 年前

@tailwindcss Love it - sooooo clean ✨

psycarlo 🍷⚡️ 的头像
psycarlo 🍷⚡️1 年前

@tailwindcss This is quite huge, ngl

Saïd Aitmbarek 的头像
Saïd Aitmbarek1 年前

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

相关视频

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

540,680 次观看 • 4 个月前

🔥 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 次观看 • 3 年前

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 次观看 • 11 个月前

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 次观看 • 7 个月前

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 次观看 • 3 年前

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 次观看 • 3 年前

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 次观看 • 2 年前

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 次观看 • 2 年前

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 次观看 • 9 个月前

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 次观看 • 1 年前

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 次观看 • 2 年前

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,502 次观看 • 1 年前

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 次观看 • 6 个月前

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 次观看 • 1 年前

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 次观看 • 4 个月前

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 次观看 • 3 年前

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 次观看 • 1 年前

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 次观看 • 2 年前