Video yükleniyor...

Video Yüklenemedi

Bu video yüklenirken bir sorun oluştu. Bu geçici bir ağ sorunundan kaynaklanıyor olabilir veya video kullanılamıyor olabilir.

Ana Sayfaya Dön

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

Ben Holmes

44,575 subscribers

86,900 görüntüleme • 1 yıl önce •via X (Twitter)

Sanat Eğitim Bilim & Teknoloji

Anya Rossi• Live Now

Private livecam show

8 Yorum

port profil fotoğrafı

port1 yıl önce

how tf did u draw this

Ben Holmes profil fotoğrafı

Ben Holmes1 yıl önce

😏

Prasenjit profil fotoğrafı

Prasenjit1 yıl önce

CSS is now a programming language.

Carl(it)os Capote 🇮🇨 profil fotoğrafı

Carl(it)os Capote 🇮🇨1 yıl önce

In Tailwind v5 Tailwind itself will be removed and you will be able to write pure CSS. 🔥

Mr Ally 🤗 profil fotoğrafı

Mr Ally 🤗1 yıl önce

They don't know how it helps to configure css with javascript 😂

cor profil fotoğrafı

cor1 yıl önce

great QoL improvement

Web Reaper | Website Engineer profil fotoğrafı

Web Reaper | Website Engineer1 yıl önce

The CSS config file is fantastic Only thing I've had issue with is when I have an extra Tailwind class I add with javascript later. It doesn't get bundled by default. So I effectively need to create it in the utilities later Something like .sr-only { apply sr-only; }

Allan Pichardo profil fotoğrafı

Allan Pichardo1 yıl önce

It's all coming full circle. Soon tailwind will be just CSS again.

Benzer Videolar

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

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

Adam Wathan

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

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 —

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

you can now edit all your ramps at once. (and export them as SVG, CSS or as Tailwind Config)

you can now edit all your ramps at once. (and export them as SVG, CSS or as Tailwind Config)

David Aerne

64,430 görüntüleme • 3 ay önce

v0 now supports tailwind configs and globals.css files — you can now use custom utility classes and CSS variables in your generations.

v0 now supports tailwind configs and globals.css files — you can now use custom utility classes and CSS variables in your generations.

v0

76,013 görüntüleme • 1 yıl önce

Clerk now supports theming with CSS variables → Built-in shadcn / ui theme → Auto-syncs with your existing config See it in action👇

Clerk now supports theming with CSS variables → Built-in shadcn / ui theme → Auto-syncs with your existing config See it in action👇

Clerk

21,452 görüntüleme • 11 ay önce

agent now automatically searches the internet when needed here's a one shot migration of Tailwind CSS 3 to 4

agent now automatically searches the internet when needed here's a one shot migration of Tailwind CSS 3 to 4

eric zakariasson

185,538 görüntüleme • 1 yıl önce

shadcn/ui patterns. No React. No build. Just Rails. Maquina Components gives you the same component architecture — ERB partials + StimulusJS + Tailwind CSS v4. Claude skill for AI-assisted dev: #Rails #RubyOnRails

shadcn/ui patterns. No React. No build. Just Rails. Maquina Components gives you the same component architecture — ERB partials + StimulusJS + Tailwind CSS v4. Claude skill for AI-assisted dev: #Rails #RubyOnRails

Mario Alberto Chávez

29,721 görüntüleme • 6 ay önce

Today’s the day 🚀 After two sold-out live workshops — “Pixel Perfect Figma to Tailwind” is launching as a video course 🎬 Covers both Tailwind CSS v3 and v4 ✨ Super STOKED about this 🎉

Today’s the day 🚀 After two sold-out live workshops — “Pixel Perfect Figma to Tailwind” is launching as a video course 🎬 Covers both Tailwind CSS v3 and v4 ✨ Super STOKED about this 🎉

Simon Vrachliotis

107,506 görüntüleme • 2 yıl önce

Just open-sourced the app I built to test Tailwind v4. • Tailwind v4 + React 19 • Custom themes, colors & scaling • Data Table with filters • Draggable & editable rows Code’s yours. Link below.

Just open-sourced the app I built to test Tailwind v4. • Tailwind v4 + React 19 • Custom themes, colors & scaling • Data Table with filters • Draggable & editable rows Code’s yours. Link below.

shadcn

538,266 görüntüleme • 1 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.

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

Officially launching "Tailwind CSS Color Tokens" 🚀 Available for FREE on Epic Web 🤗 Here's the intro video — link to the workshop will be in the reply.

Officially launching "Tailwind CSS Color Tokens" 🚀 Available for FREE on Epic Web 🤗 Here's the intro video — link to the workshop will be in the reply.

Simon Vrachliotis

41,867 görüntüleme • 1 yıl ö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.

HeroUI

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

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

The dark mode is done!🙌 I added dark mode to the invoice generator. The magic of Tailwind CSS. It's super easy to do. Check it out: 🔗

The dark mode is done!🙌 I added dark mode to the invoice generator. The magic of Tailwind CSS. It's super easy to do. Check it out: 🔗

Csaba Kissi

16,351 görüntüleme • 2 yıl önce

Introducing the open-source Next.js Audio Starter Kit Add Text to Speech, Speech to Text, Sound Effects and Conversational AI to your product in minutes. Built with: • ElevenLabs SDK • Next.js + shadcn/ui • Tailwind CSS v4 Repo link in the comments below:

Introducing the open-source Next.js Audio Starter Kit Add Text to Speech, Speech to Text, Sound Effects and Conversational AI to your product in minutes. Built with: • ElevenLabs SDK • Next.js + shadcn/ui • Tailwind CSS v4 Repo link in the comments below:

ElevenLabs Developers

145,836 görüntüleme • 1 yıl önce

Struggling to make your UI stand out? CSSnippets – A collection of modern, reusable UI components! ✨Ready-to-use with HTML, CSS, React & Tailwind CSS ✨No frameworks, just pure CSS ✨Clean, minimal, and beautiful 🔗 Explore now: Save it for later! 🔖

Struggling to make your UI stand out? CSSnippets – A collection of modern, reusable UI components! ✨Ready-to-use with HTML, CSS, React & Tailwind CSS ✨No frameworks, just pure CSS ✨Clean, minimal, and beautiful 🔗 Explore now: Save it for later! 🔖

Shefali

22,953 görüntüleme • 1 yıl önce

✨ Build Next.js, Tailwind CSS & shadcn UIs with AI + visual editing. Export the code in one click. Live on ProductHunt now. Link below.

✨ Build Next.js, Tailwind CSS & shadcn UIs with AI + visual editing. Export the code in one click. Live on ProductHunt now. Link below.

Mattia

28,178 görüntüleme • 1 yıl önce

It's finally here! Untitled UI React is live ✨ Untitled UI React is the world’s largest collection of open-source React components built with Tailwind CSS v4.1 and React Aria. Just copy, paste, and build. 👇

It's finally here! Untitled UI React is live ✨ Untitled UI React is the world’s largest collection of open-source React components built with Tailwind CSS v4.1 and React Aria. Just copy, paste, and build. 👇

Jordan Hughes

244,241 görüntüleme • 1 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.

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