TailwindCSS .s out.

Tailwind CSS bids farewell to the beta stage and officially releases v4.0 version!

The v4.0 version was officially released on January 22, 2025 (US Eastern Standard Time). UTC/GMT -5 hours.

Performance and Benchmark Results

One of the highlights of Tailwind CSS v4.0 is the new high-performance engine. Through a complete architectural rewrite, the development team reported significant improvements in build times and incremental rebuild speeds.

构建类型	v3.4 (中位数)	v4.0 Beta (中位数)	性能提升倍数
**完整构建**	378ms	100ms	3.78倍
**增量重建 (新增 CSS)**	44ms	5ms	8.8倍
**增量重建 (无新增 CSS)**	35ms	192µs	182倍

The table shows that without adding new CSS content, the response time of incremental reconstruction can reach microseconds, thus significantly improving development efficiency.

Key changes

Thanks to the new pure CSS-first approach, you no longer need to delve into the complexities of JS customization.

Tailwind CSS v4.0 delivers a powerful and future-proof architecture that emphasizes speed, simplicity and deeper alignment with native CSS standards. With CSS-first configuration, native cascading layers, expanded 3D transform utilities, and optimized gradient workflows, Tailwind CSS continues to push the boundaries of utility-first design.

CSS priority configuration

A landmark improvement of Tailwind CSS v4.0 is CSS priority configuration. Instead of using a dedicated tailwind.config.js, developers can declare design tokens directly in CSS using the @theme rule:

<code>@import "tailwindcss";

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

Automatic source code detection

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

<code>@import "tailwindcss";
@source "../node_modules/@my-company/ui-lib";</code>

Built-in CSS translation and import

In v4.0, Lightning CSS integration seamlessly handles vendor prefixing, feature translation, and compression. Previously, developers might have relied on postcss-import or autoprefixer; now these are no longer needed:

<code>@import "tailwindcss";</code>

--

Reference link

https://www.php.cn/link/2784c762da784d9adece645ff9e61637
https://www.php.cn/link/7aaca7ed25a9290e1953a69e401d924c
https://www.php.cn/link/b27152e13b5ed9b61478a1384d7b9bf2
https://www.php.cn/link/c07d101913fe4982e90874d6747e4e59

The above is the detailed content of TailwindCSS .s out.. For more information, please follow other related articles on the PHP Chinese website!