DEV Community

Cover image for Tailwind v4.0
Devyn Clark
Devyn Clark

Posted on

2 1

Tailwind v4.0

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)

Collapse
 
ratneshat24 profile image
Ratnesh Sharma

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!

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more