Tailwind v4.0 is finally here!
This new version of the popular CSS framework has been reconfigured for greater efficiency and is taking the new web platform by the horns to lighten the load on all of web-dev!
Boosted Performance engine
Full builds have now increased to five times the speed. If that isn't enough, the speed of an incremental build has boosted by 100 times.
Simplified Installation
The amount of dependencies has lessened as well as zero configuration.
Automatic content detection
Adding onto the lack of configuration needed, your template files may now be detected automatically.
An instance of this would be avoiding scan your project's '.gitignore' file or any binary extensions like images or videos.
CSS-first configuration
In a major shift, you may now use your CSS file to directly configure your customizations when you've imported tailwind.
CSS theme variables
Tailwind v4.0 allows you to take your design tokens and make them available as variables by default, allowing you to reference them during the runtime.
This will make using them as inline styles or passing them to libraries like Motion easier.
Additional 3-D transformation ultlities
New API's have been added to bump up 3-D transformations: 'rotate-x-', 'rotate-y-', 'scale-z-', 'translation-z-' as well as others.
Look to the updated transform-style, rotate, perspective, and perspective-origin documentation to get started.
Top comments (1)
Thanks for sharing this update! Tailwind v4.0 looks like a game-changer with its performance boost and CSS-first configuration. The automatic content detection and 3D transformation utilities are great additions. Excited to explore these new features!