Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

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 görüntüleme • 1 yıl önce •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

10 Yorum

Manikanta Srivishnu(msv) profil fotoğrafı
Manikanta Srivishnu(msv)1 yıl önce

@tailwindcss do you make a tailwind course?

Tony Lea profil fotoğrafı
Tony Lea1 yıl önce

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

Shruti Balasa profil fotoğrafı
Shruti Balasa1 yıl önce

@tailwindcss Super cool!!

Tony Lea profil fotoğrafı
Tony Lea1 yıl önce

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

Radek Podrázký 🇨🇿 profil fotoğrafı
Radek Podrázký 🇨🇿1 yıl önce

@tailwindcss Looks awesome. Mind you share the code?

Tony Lea profil fotoğrafı
Tony Lea1 yıl önce

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

@iprodan.dev 🦋 profil fotoğrafı
@iprodan.dev 🦋1 yıl önce

@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) profil fotoğrafı
Morgan Linton (hiring)1 yıl önce

@tailwindcss Love it - sooooo clean ✨

psycarlo 🍷⚡️ profil fotoğrafı
psycarlo 🍷⚡️1 yıl önce

@tailwindcss This is quite huge, ngl

Saïd Aitmbarek profil fotoğrafı
Saïd Aitmbarek1 yıl önce

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

Benzer Videolar

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,403 görüntüleme • 4 ay önce

🔥 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 görüntüleme • 3 yıl önce

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 görüntüleme • 10 ay önce

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 görüntüleme • 6 ay önce

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 görüntüleme • 3 yıl önce

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 görüntüleme • 3 yıl önce

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 görüntüleme • 1 yıl önce

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 görüntüleme • 2 yıl önce

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 görüntüleme • 2 yıl önce

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 görüntüleme • 8 ay önce

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 görüntüleme • 1 yıl önce

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 görüntüleme • 2 yıl önce

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 görüntüleme • 1 yıl önce

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 görüntüleme • 5 ay önce

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 görüntüleme • 1 yıl önce

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 görüntüleme • 3 ay önce

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 görüntüleme • 3 yıl önce

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 görüntüleme • 1 yıl önce

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 görüntüleme • 2 yıl önce