Загрузка видео...

Не удалось загрузить видео

На главную

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

537,053 просмотров • 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 просмотров • 10 месяцев назад

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 просмотров • 6 месяцев назад

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 просмотров • 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,753 просмотров • 3 лет назад

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 просмотров • 1 год назад

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 просмотров • 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,351 просмотров • 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 просмотров • 8 месяцев назад

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,006 просмотров • 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 просмотров • 5 месяцев назад

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 просмотров • 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,163 просмотров • 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 лет назад