Table of Contents
Performance and Benchmark Results
Key changes
CSS priority configuration
Automatic source code detection
Built-in CSS translation and import
Reference link
Home Web Front-end CSS Tutorial TailwindCSS .s out.

TailwindCSS .s out.

Jan 22, 2025 pm 06:07 PM

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>
Copy after login

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>
Copy after login

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>
Copy after login

--

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!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot Article Tags

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Adding Box Shadows to WordPress Blocks and Elements Adding Box Shadows to WordPress Blocks and Elements Mar 09, 2025 pm 12:53 PM

Adding Box Shadows to WordPress Blocks and Elements

Create a JavaScript Contact Form With the Smart Forms Framework Create a JavaScript Contact Form With the Smart Forms Framework Mar 07, 2025 am 11:33 AM

Create a JavaScript Contact Form With the Smart Forms Framework

Create an Inline Text Editor With the contentEditable Attribute Create an Inline Text Editor With the contentEditable Attribute Mar 02, 2025 am 09:03 AM

Create an Inline Text Editor With the contentEditable Attribute

Making Your First Custom Svelte Transition Making Your First Custom Svelte Transition Mar 15, 2025 am 11:08 AM

Making Your First Custom Svelte Transition

Comparing the 5 Best PHP Form Builders (And 3 Free Scripts) Comparing the 5 Best PHP Form Builders (And 3 Free Scripts) Mar 04, 2025 am 10:22 AM

Comparing the 5 Best PHP Form Builders (And 3 Free Scripts)

File Upload With Multer in Node.js and Express File Upload With Multer in Node.js and Express Mar 02, 2025 am 09:15 AM

File Upload With Multer in Node.js and Express

Working With GraphQL Caching Working With GraphQL Caching Mar 19, 2025 am 09:36 AM

Working With GraphQL Caching

Show, Don't Tell Show, Don't Tell Mar 16, 2025 am 11:49 AM

Show, Don't Tell

See all articles