This Jan we got Tailwind v4 and now shadcn/ui officially supports tailwind v4.
Tailwind CSS v4.0 introduces several significant enhancements aimed at improving performance and developer experience:
- High-Performance Engine: Full builds are up to 5x faster, and incremental builds are over 100x faster.
- Modern Web Features: Utilizes native cascade layers, registered custom properties and color-mix() for advanced styling capabilities.
- Simplified Installation: Requires fewer dependencies and offers zero configuration with a single line of code in your CSS file.
- CSS-First Configuration: Customization is now done directly in CSS, moving away from JavaScript configuration files.
Shadcn UI has been updated to fully support Tailwind CSS v4.0, incorporating the following changes:
- CLI Support: The CLI can now initialize projects with Tailwind v4.
- Updated New York Style: The site now uses the upgraded new-york components.
- Component Updates: All components have been updated for compatibility with Tailwind v4 and React 19. ( you won't get the React 19 warning anymore :) )
- Theming Enhancements: Full support for the new theme directive, facilitating easier theming and customization.
And if you are not using yet, these are some free tools (not mine 😊) for shadcn that are just too good not to mention :
- Shadcn Form - Instant forms with premade components and auto validation.
- Tweakcn- Customizable shadcn/ui themes.
- Motion Primitives - Animated components that go really well with shadcn/ui.
Hope this helps for your next project with shadcn/ui 😄!
Top comments (0)