DEV Community

Cover image for TailwindCSS 4.0.0 is out.
YURII DE.
YURII DE.

Posted on

3

TailwindCSS 4.0.0 is out.

Good news, the TailwindCSS is out of beta.

v4.0 release Jan 22, 2025 by EST (Eastern Standard Time) UTC/GMT -5 hours.

Performance and Benchmark Results

One of the major achievements in Tailwind CSS v4.0 is the new high-performance engine. Through a complete architectural rewrite, the development team reports significantly faster build times and incremental rebuilds.

Build Type v3.4 (Median) v4.0 Beta (Median) Improvement Factor
Full build 378ms 100ms 3.78×
Incremental rebuild (new CSS) 44ms 5ms 8.8×
Incremental rebuild (no new CSS) 35ms 192µs 182×

The table demonstrates how incremental rebuilds without new CSS content can reach microsecond-scale response times, making development workflows more efficient.

Key changes

Thanks to the new approach, which focuses on pure CSS, you won't need to delve into the intricacies of JS customizations anymore.

Tailwind CSS v4.0 delivers a robust, forward-thinking architecture that emphasizes speed, simplicity, and deeper alignment with native CSS standards. Through CSS-first configuration, native cascade layers, expanded 3D transform utilities, and optimized gradient workflows, Tailwind CSS continues to push the boundaries of utility-first design.

CSS-First Configuration

A hallmark improvement in Tailwind CSS v4.0 is the CSS-first configuration. Instead of using a dedicated tailwind.config.js, developers can declare their design tokens directly within the CSS using an @theme rule:

@import "tailwindcss";

@theme {
  --font-display: "Satoshi", "sans-serif";
  --breakpoint-3xl: 1920px;
  --color-avocado-400: oklch(0.92 0.19 114.08);
  /* ... */
}
Enter fullscreen mode Exit fullscreen mode

Automatic Source Detection

Tailwind CSS v4.0 reduces the need to manually configure the content array. By default, it scans source files based on common heuristics, automatically excluding paths in .gitignore or media files. If needed, specific sources may be added via:

@import "tailwindcss";
@source "../node_modules/@my-company/ui-lib";
Enter fullscreen mode Exit fullscreen mode

Built-In CSS Transpilation and Import

In v4.0, Lightning CSS integration seamlessly handles vendor prefixes, feature transpilation, and minification. Previously, a developer might rely on postcss-import or autoprefixer; these are now unnecessary:

@import "tailwindcss";
Enter fullscreen mode Exit fullscreen mode

--

References

https://tailwindcss.com/docs/v4-beta
https://www.npmjs.com/package/tailwindcss
https://github.com/tailwindlabs/tailwindcss/tree/v4.0.0
https://github.com/tailwindlabs/tailwindcss/releases/tag/v4.0.0

Reinvent your career. Join DEV.

It takes one minute and is worth it for your career.

Get started

Top comments (1)

Collapse
 
orashus profile image
Rash Edmund Jr

This is great for us

Heroku

Build apps, not infrastructure.

Dealing with servers, hardware, and infrastructure can take up your valuable time. Discover the benefits of Heroku, the PaaS of choice for developers since 2007.

Visit Site

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay