正在加载视频...

视频加载失败

返回首页

✨ 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.

adamwathan's profile picture

Adam Wathan

292,870 subscribers

506,266 次观看 • 1 年前 •via X (Twitter)

科学技术教育艺术
LIVE

Anya Rossi• Live Now

Private livecam show

9 条评论

Adam Wathan 的头像
Adam Wathan1 年前

Everything you need to know is here — go build something awesome 💪🏻

Christian Esmann 的头像
Christian Esmann1 年前

I just launched an all-in-one template for cross-platform development, based on the stack I use myself everyday. Expo, NextJS, TypeScript, Tailwind, Firebase, AppsFlyer, Authentication, Analytics, In-App Purchases, Stripe and a lot more, setup by default.

Lac Tran An 的头像
Lac Tran An1 年前

Can't wait to dive in! Tailwind is such a superpower CSS library - it really cuts down on my headaches. Absolutely love the utility-first concept!

Wes Bos 的头像
Wes Bos1 年前

Yessss! Congrats man - huge project to get out the door

Tom Siwik 的头像
Tom Siwik1 年前

Loving it. Congrats - the blog post styliing is broken though

Andy Holmes 的头像
Andy Holmes1 年前

lmao I love "The Anti-Patterns" on the homepage, touché

pedro 的头像
pedro1 年前

Application error: a client-side exception has occurred (see the browser console for more information). 6641-b8e2d85215a15fbe.js:1 ChunkLoadError: Loading chunk 8974 failed. (error: at webpack-6908f96c1dd9d8e0.js:1:1211 at Array.reduce (<anonymous>)

Mehmet Canhoroz 的头像
Mehmet Canhoroz1 年前

Great, now we have to wait for a year to get all libs support that currently using :D but yeah, v4 seems well improved and good. thanks!

Rob Zolkos 的头像
Rob Zolkos1 年前

Thank you for this 🙏. Really appreciate it.

相关视频

✨ We tagged Tailwind CSS v4.1! 🎭 New masking utilities 🫣 Text shadows (!) 🫂 Improved browser compatibility …and tons more — check it out:
12:04

✨ We tagged Tailwind CSS v4.1! 🎭 New masking utilities 🫣 Text shadows (!) 🫂 Improved browser compatibility …and tons more — check it out:

Adam Wathan

140,509 次观看 • 1 年前

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
0:33

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

Tony Lea

52,132 次观看 • 1 年前

Here is how I made the ✨shiny✨ hover effect using Tailwind CSS.
2:40

Here is how I made the ✨shiny✨ hover effect using Tailwind CSS.

Alfon

71,117 次观看 • 1 年前

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

¡Ha salido Tailwind 4! 🎉 Mejoras de rendimiento, configuración con CSS, container queries, transformaciones 3D, soporte a nuevas funcionalidades. Si este post llega a 400 comentarios pidiendo curso... Tendremos curso en febrero. Totalmente gratis.
0:20

¡Ha salido Tailwind 4! 🎉 Mejoras de rendimiento, configuración con CSS, container queries, transformaciones 3D, soporte a nuevas funcionalidades. Si este post llega a 400 comentarios pidiendo curso... Tendremos curso en febrero. Totalmente gratis.

Miguel Ángel Durán

63,871 次观看 • 1 年前

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

Progress on `mask-image` support for Tailwind CSS v4.1… 🍿
1:47

Progress on `mask-image` support for Tailwind CSS v4.1… 🍿

Adam Wathan

106,325 次观看 • 1 年前

#CSS Neue Bento ✅ grid layout ✅ :has() quantity queries ✅ aspect-ratio container queries ✅ view transitions for flare
0:48

#CSS Neue Bento ✅ grid layout ✅ :has() quantity queries ✅ aspect-ratio container queries ✅ view transitions for flare

Adam Argyle

128,343 次观看 • 2 年前

Anime.js 4.2.0 is out! 🧩 All modules can now be imported individually with subpaths 🎨 CSS variable values support 🏹 Simpler spring API with bounce & duration params 📈 More WAAPI built-in easing functions 🎛️ And an easing editor! Plus tons of fixes and improvements!
0:38

Anime.js 4.2.0 is out! 🧩 All modules can now be imported individually with subpaths 🎨 CSS variable values support 🏹 Simpler spring API with bounce & duration params 📈 More WAAPI built-in easing functions 🎛️ And an easing editor! Plus tons of fixes and improvements!

Julian Garnier

292,595 次观看 • 8 个月前

Product Launch 📢✨ Introducing "Tailwind CSS Notion Handbook" ↳ Tailwind CSS Basics ↳ 30 Tailwind CSS Tips ↳ 10 Bonus Tips ↳ Production Checklist ↳ UI Kits & Templates ↳ 20+ Tools & Resources Launch Price: $9 for 24 hours ⏰ Code: LAUNCH75 👉
0:31

Product Launch 📢✨ Introducing "Tailwind CSS Notion Handbook" ↳ Tailwind CSS Basics ↳ 30 Tailwind CSS Tips ↳ 10 Bonus Tips ↳ Production Checklist ↳ UI Kits & Templates ↳ 20+ Tools & Resources Launch Price: $9 for 24 hours ⏰ Code: LAUNCH75 👉

Surjith S M ✪

93,727 次观看 • 3 年前

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

responsive stacked tabs w/ CSS grid 👨‍🍳 + works with keyboard navigation + drag gestures + container queries for orientation
0:36

responsive stacked tabs w/ CSS grid 👨‍🍳 + works with keyboard navigation + drag gestures + container queries for orientation

jhey ʕ•ᴥ•ʔ

71,149 次观看 • 8 个月前

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

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

built a tool that's been on my list forever: → drop any screenshot, video, or website → ai extracts every color, font, section and style → copy as CSS or Tailwind
0:44

built a tool that's been on my list forever: → drop any screenshot, video, or website → ai extracts every color, font, section and style → copy as CSS or Tailwind

alan

37,365 次观看 • 2 个月前

CSS Tip ✨ Button shimmers are a cool use case for container queries 🤓 Shift an element side to side whilst spinning a gradient Don't know the size? Use a query ⚡️ button{container-type: size;} @ keyframes slide {to{ translate: calc(100cqw-100%) 0; }} CodePen.IO link below 👇
0:45

CSS Tip ✨ Button shimmers are a cool use case for container queries 🤓 Shift an element side to side whilst spinning a gradient Don't know the size? Use a query ⚡️ button{container-type: size;} @ keyframes slide {to{ translate: calc(100cqw-100%) 0; }} CodePen.IO link below 👇

jhey ʕ•ᴥ•ʔ

228,661 次观看 • 3 年前

Pigment CSS is here! Our new zero-runtime CSS-in-JS library that’s compatible with React Server Components and brings significant performance improvements over other styling engines 🏎️💨 Ready to jump into it? Follow our quick guide:
2:19

Pigment CSS is here! Our new zero-runtime CSS-in-JS library that’s compatible with React Server Components and brings significant performance improvements over other styling engines 🏎️💨 Ready to jump into it? Follow our quick guide:

MUI org

30,043 次观看 • 1 年前

CSS picture-in-picture video transition using container queries + position: sticky 🧑‍🍳 .container { container-type: scroll-state; } @​container scroll-state(stuck: top) { video { translate: calc(50vw - 100%) calc(100vh - 100%); } }
0:36

CSS picture-in-picture video transition using container queries + position: sticky 🧑‍🍳 .container { container-type: scroll-state; } @​container scroll-state(stuck: top) { video { translate: calc(50vw - 100%) calc(100vh - 100%); } }

jhey ʕ•ᴥ•ʔ

138,071 次观看 • 1 年前

🏎️ Tailwind CSS Speedrun — YouTube thumbnail
1:06

🏎️ Tailwind CSS Speedrun — YouTube thumbnail

Simon Vrachliotis

13,759 次观看 • 1 年前

Ark UI is now available in Svelte 5 🔥 ✅ 45+ accessible, unstyled UI components ✅ Works smoothly with Svelte primitives ($effect, _$state, $derived) ✅ Style every component in your way (Panda CSS, Tailwind, CSS Modules) 👉🏽 Check it out here
0:28

Ark UI is now available in Svelte 5 🔥 ✅ 45+ accessible, unstyled UI components ✅ Works smoothly with Svelte primitives ($effect, _$state, $derived) ✅ Style every component in your way (Panda CSS, Tailwind, CSS Modules) 👉🏽 Check it out here

Sage ⚡️

13,189 次观看 • 1 年前