Video wird geladen...

Video konnte nicht geladen werden

Beim Laden dieses Videos ist ein Problem aufgetreten. Dies könnte an einem vorübergehenden Netzwerkproblem liegen oder das Video ist möglicherweise nicht verfügbar.

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 Aufrufe • vor 1 Jahr •via X (Twitter)

Kunst Bildung Wissenschaft & Technologie

Anya Rossi• Live Now

Private livecam show

8 Kommentare

Profilbild von port

portvor 1 Jahr

how tf did u draw this

Profilbild von Ben Holmes

Ben Holmesvor 1 Jahr

😏

Profilbild von Prasenjit

Prasenjitvor 1 Jahr

CSS is now a programming language.

Profilbild von Carl(it)os Capote 🇮🇨

Carl(it)os Capote 🇮🇨vor 1 Jahr

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

Profilbild von Mr Ally 🤗

Mr Ally 🤗vor 1 Jahr

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

Profilbild von cor

corvor 1 Jahr

great QoL improvement

Profilbild von Web Reaper | Website Engineer

Web Reaper | Website Engineervor 1 Jahr

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; }

Profilbild von Allan Pichardo

Allan Pichardovor 1 Jahr

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

Ähnliche Videos

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,557 Aufrufe • vor 1 Jahr

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 Aufrufe • vor 1 Jahr

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,263 Aufrufe • vor 2 Monaten

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 Aufrufe • vor 1 Jahr

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 Aufrufe • vor 11 Monaten

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 Aufrufe • vor 1 Jahr

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 Aufrufe • vor 5 Monaten

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 Aufrufe • vor 2 Jahren

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 Aufrufe • vor 1 Jahr

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 Aufrufe • vor 1 Jahr

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 Aufrufe • vor 1 Jahr

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,016 Aufrufe • vor 3 Monaten

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,919 Aufrufe • vor 3 Monaten

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 Aufrufe • vor 2 Jahren

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 Aufrufe • vor 1 Jahr

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 Aufrufe • vor 1 Jahr

✨ 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 Aufrufe • vor 1 Jahr

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

243,934 Aufrufe • vor 1 Jahr

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 Aufrufe • vor 1 Jahr