Tailwind CSS v4
Tailwind CSS v4
TAILWIND CSS V4
IS NOW IN TOWN!
Swipe to know
rockyhaque
1. CONFIGURATION METHOD
BEFORE
AFTER
Tailwind CSS v4.0 adopts a CSS-first configuration approach, allowing
customizations directly within CSS files using the @theme directive.
rockyhaque
BEFORE
Tailwind CSS was imported using @tailwind directives.
AFTER
BEFORE
CSS nesting required external plugins or was not natively supported.
AFTER
Tailwind CSS v4.0 includes native support for CSS nesting, allowing for
more intuitive and organized styling.
rockyhaque
4. DEPRECATED UTILITIES
BEFORE
Certain utilities have been removed or replaced in v4.0
AFTER
Opacity modifiers are now applied directly to color utilities.
rockyhaque
5. PERFORMANCE IMPROVEMENTS
https://rocky-haque.vercel.app