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

This week, Gabriel Perales 🤓 and I worked together on a tool for Tailwind CSS users. The tool lets you easily create grids for your Tailwind CSS projects, perfect for generating bento-style grids! It supports Tailwind CSS v3/v4 —
1:08

This week, Gabriel Perales 🤓 and I worked together on a tool for Tailwind CSS users. The tool lets you easily create grids for your Tailwind CSS projects, perfect for generating bento-style grids! It supports Tailwind CSS v3/v4 —

Michael Andreuzza

69,293 görüntüleme • 1 yıl önce

✨ Tailwind CSS v4.0 is here! Huge performance improvements, radically simplified setup experience, CSS-first configuration, modernized P3 color palette, container queries, 3D transforms, expanded gradient APIs, @​starting-style support… …and tons, tons more.
0:20

✨ Tailwind CSS v4.0 is here! Huge performance improvements, radically simplified setup experience, CSS-first configuration, modernized P3 color palette, container queries, 3D transforms, expanded gradient APIs, @​starting-style support… …and tons, tons more.

Adam Wathan

506,374 görüntüleme • 1 yıl önce

Tailwind Tip #5 ✨ You can use ":invalid" pseudo class to create a pure css Tailwind CSS form validation without javascript. View code 👇 (5/30) follow for 25 more tips 😊
0:24

Tailwind Tip #5 ✨ You can use ":invalid" pseudo class to create a pure css Tailwind CSS form validation without javascript. View code 👇 (5/30) follow for 25 more tips 😊

Surjith S M ✪

169,280 görüntüleme • 3 yıl önce

Released a new Tailwind CSS template today 🫣
0:50

Released a new Tailwind CSS template today 🫣

Adam Wathan

180,227 görüntüleme • 2 yıl önce

Little whirlwind tour of some theme customization workflows in Tailwind CSS v4 🌪️
0:38

Little whirlwind tour of some theme customization workflows in Tailwind CSS v4 🌪️

Adam Wathan

65,393 görüntüleme • 2 yıl önce

Tailwind v4 killed the config file 😳 Now, it's just CSS variables. Here's why that's awesome
0:59

Tailwind v4 killed the config file 😳 Now, it's just CSS variables. Here's why that's awesome

Ben Holmes

86,900 görüntüleme • 1 yıl önce

✨ Build Next.js, Tailwind CSS & shadcn UIs with a visual builder. And yes, you can export the code. Link below.
0:22

✨ Build Next.js, Tailwind CSS & shadcn UIs with a visual builder. And yes, you can export the code. Link below.

Mattia

163,281 görüntüleme • 1 yıl önce

Making a ✨stacked✨ avatar list using maskImage. Works against any transparent background!! Using Tailwind CSS v4. Recorded and edited using
1:14

Making a ✨stacked✨ avatar list using maskImage. Works against any transparent background!! Using Tailwind CSS v4. Recorded and edited using

Alfon

39,397 görüntüleme • 1 yıl önce

Because tailwind_compiler is written in Zig I can build an in-browser compiler pretty easily by targeting Wasm. Here is a demo Try for yourself: The full Tailwind CSS v4 tailwind_compiler is a 122kb Wasm asset
0:22

Because tailwind_compiler is written in Zig I can build an in-browser compiler pretty easily by targeting Wasm. Here is a demo Try for yourself: The full Tailwind CSS v4 tailwind_compiler is a 122kb Wasm asset

Brian Cardarella

13,919 görüntüleme • 2 ay önce

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

532,340 görüntüleme • 3 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

Quick demo of JS config file support and plugin support in the latest Tailwind CSS v4 alpha 🫣
6:27

Quick demo of JS config file support and plugin support in the latest Tailwind CSS v4 alpha 🫣

Adam Wathan

91,557 görüntüleme • 1 yıl önce

riffin' on forms is fun 3D CSS transforms + SVG filtering with feDisplacementMap 🤙
0:32

riffin' on forms is fun 3D CSS transforms + SVG filtering with feDisplacementMap 🤙

jhey ʕ•ᴥ•ʔ

27,241 görüntüleme • 1 yıl önce

Created this fully "accessible" dropdown using pure Tailwind CSS 🤩 × No javascript × No custom styles Can you guess which CSS property is this?
0:21

Created this fully "accessible" dropdown using pure Tailwind CSS 🤩 × No javascript × No custom styles Can you guess which CSS property is this?

Surjith S M ✪

169,682 görüntüleme • 3 yıl önce

Introducing Nim, the first motion-primitives template. A minimal personal website with an MDX blog and animated components. Built with Next.js 15, React 19, Tailwind CSS v4, and Motion.
0:26

Introducing Nim, the first motion-primitives template. A minimal personal website with an MDX blog and animated components. Built with Next.js 15, React 19, Tailwind CSS v4, and Motion.

Ibelick

27,338 görüntüleme • 1 yıl önce

Titan - a fullstack Next.js 15 template - Auth: Better Auth - ORM: Drizzle ORM - DB: Neon Postgres - UI: shadcn ui & Tailwind CSS v4 check here: titan[dot]rdsx[dot]dev
0:28

Titan - a fullstack Next.js 15 template - Auth: Better Auth - ORM: Drizzle ORM - DB: Neon Postgres - UI: shadcn ui & Tailwind CSS v4 check here: titan[dot]rdsx[dot]dev

rds

68,314 görüntüleme • 1 yıl önce

✨ Just published a new Tailwind CSS template! Commit is a beautiful changelog template, built with Next.js, MDX, and a dash of Motion One.
0:34

✨ Just published a new Tailwind CSS template! Commit is a beautiful changelog template, built with Next.js, MDX, and a dash of Motion One.

Adam Wathan

192,324 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 • 9 ay önce

Starting a new series on YouTube on CSS Layouts, starting with the box model. watch the full video:
0:49

Starting a new series on YouTube on CSS Layouts, starting with the box model. watch the full video:

Jess Chan | Coder Coder

43,796 görüntüleme • 4 ay önce