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

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

Возникла проблема при загрузке этого видео. Это может быть связано с временными проблемами сети или видео может быть недоступно.

На главную

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

Ben Holmes

45,906 subscribers

86,923 просмотров • 1 год назад •via X (Twitter)

Искусство Образование Наука и технологии

Anya Rossi• Live Now

Private livecam show

Комментарии: 8

Фото профиля port

port1 год назад

how tf did u draw this

Фото профиля Ben Holmes

Ben Holmes1 год назад

😏

Фото профиля Prasenjit

Prasenjit1 год назад

CSS is now a programming language.

Фото профиля Carl(it)os Capote 🇮🇨

Carl(it)os Capote 🇮🇨1 год назад

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

Фото профиля Mr Ally 🤗

Mr Ally 🤗1 год назад

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

Фото профиля cor

cor1 год назад

great QoL improvement

Фото профиля Web Reaper | Website Engineer

Web Reaper | Website Engineer1 год назад

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

Allan Pichardo1 год назад

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

Похожие видео

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 просмотров • 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 —

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 год назад

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

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

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

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

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

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

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

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

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 месяцев назад

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

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

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

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

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

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

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

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