TailwindCSS .s keluar.

Tailwind CSS membida perpisahan ke peringkat beta dan mengeluarkan versi v4.0 secara rasmi!

Versi v4.0 telah dikeluarkan secara rasmi pada 22 Januari 2025 (Waktu Standard Timur AS). UTC/GMT -5 jam.

Prestasi dan Keputusan Penanda Aras

Salah satu sorotan Tailwind CSS v4.0 ialah enjin berprestasi tinggi baharu. Melalui penulisan semula seni bina yang lengkap, pasukan pembangunan melaporkan peningkatan yang ketara dalam masa binaan dan kelajuan binaan semula yang bertambah.

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

Jadual menunjukkan bahawa tanpa menambah kandungan CSS baharu, masa tindak balas pembinaan semula berperingkat boleh mencapai mikrosaat, sekali gus meningkatkan kecekapan pembangunan dengan ketara.

Perubahan utama

Terima kasih kepada pendekatan CSS-first tulen baharu, anda tidak perlu lagi menyelidiki kerumitan penyesuaian JS.

Tailwind CSS v4.0 menyampaikan seni bina yang kuat dan kalis masa hadapan yang menekankan kelajuan, kesederhanaan dan penjajaran yang lebih mendalam dengan piawaian CSS asli. Dengan konfigurasi CSS-first, lapisan lata asli, utiliti transformasi 3D yang dikembangkan dan aliran kerja kecerunan yang dioptimumkan, Tailwind CSS terus menolak sempadan reka bentuk yang mengutamakan utiliti.

Konfigurasi keutamaan CSS

Peningkatan mercu tanda Tailwind CSS v4.0 ialah konfigurasi keutamaan CSS. Daripada menggunakan tailwind.config.js khusus, pembangun boleh mengisytiharkan token reka bentuk terus dalam CSS menggunakan peraturan @theme:

<code>@import "tailwindcss";

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

Pengesanan kod sumber automatik

Tailwind CSS v4.0 mengurangkan keperluan untuk mengkonfigurasi tatasusunan content secara manual. Secara lalai, ia mengimbas fail sumber berdasarkan heuristik biasa, secara automatik mengecualikan laluan atau fail media dalam .gitignore. Jika perlu, sumber tertentu boleh ditambah melalui:

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

Terjemahan dan import CSS terbina dalam

Dalam v4.0, penyepaduan Lightning CSS dengan lancar mengendalikan awalan vendor, terjemahan ciri dan pemampatan. Sebelum ini, pembangun mungkin telah bergantung pada postcss-import atau autoprefixer; kini ini tidak lagi diperlukan:

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

--

Pautan rujukan

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

Atas ialah kandungan terperinci TailwindCSS .s keluar.. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!