TailwindCSS .s out.
Jan 22, 2025 pm 06:07 PMTailwind 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倍 |
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!

Hot Article

Hot tools Tags

Hot Article

Hot Article Tags

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

Adding Box Shadows to WordPress Blocks and Elements

Create a JavaScript Contact Form With the Smart Forms Framework

Create an Inline Text Editor With the contentEditable Attribute

Making Your First Custom Svelte Transition

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

File Upload With Multer in Node.js and Express
