Tailwind CSS v4: CSS-First Config, Engine Oxide Và Tốc Độ Build Nhanh Hơn 3 Lần

Tailwind CSS v4 ra mắt stable tháng 1/2025, đánh dấu bước chuyển lớn nhất trong lịch sử framework CSS này kể từ khi ra mắt 2017. Từ cách cấu hình, engine build, đến cách viết CSS — tất cả đều thay đổi căn bản. Bài viết phân tích chi tiết các thay đổi chính và hướng dẫn di chuyển từ v3 sang v4.

1. Engine Mới: Oxide — Build Nhanh Hơn 3,78 Lần

Tailwind v4 viết lại toàn bộ từ đầu với engine Oxide. Đây là bước cải tiến lớn nhất về hiệu suất build. Kết quả benchmark trên Catalyst project:

Full build: 378ms (v3) → 100ms (v4) — nhanh 3,78 lần
Incremental rebuild (có CSS mới): 44ms → 5ms — nhanh 8,8 lần
Incremental rebuild (không CSS mới): 35ms → 192µs — nhanh 182 lần

Mọi utility đều JIT, không còn JIT mode option. Tailwind v4 chỉ có một chế độ duy nhất: JIT. Điều này loại bỏ hoàn toàn tradeoff giữa development speed và production file size.

Engine Oxide cũng tích hợp Lightning CSS cho vendor prefixing và modern syntax transforms, bỏ nhu cầu dùng PostCSS plugin riêng.

2. CSS-First Config — Bỏ tailwind.config.js

Thay đổi gây shock nhất cho cộng đồng Tailwind: không còn tailwind.config.js. Thay vào đó, cấu hình design tokens nằm trực tiếp trong CSS:

@import "tailwindcss";

@theme {
  --font-display: "Satoshi", "sans-serif";
  --color-brand: oklch(0.84 0.18 117.33);
  --breakpoint-3xl: 1920px;
}

Tất cả design tokens xuất ra dạng native CSS variables — có thể dùng trong CSS thuần, không bị giới hạn trong class Tailwind. Đây là bước tiến quan trọng: CSS trở thành nguồn truth duy nhất.

3. Bỏ Directive Cũ

Cú pháp rút gọn đáng kể: thay vì 3 directive riêng biệt, chỉ cần một import:

/* Trước (v3) */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Sau (v4) */
@import "tailwindcss";

Ba directive cũ được gộp thành một import duy nhất. Đơn giản hơn, ít lỗi hơn.

4. Tính Năng Mới Quan Trọng

Container queries: first-class API, không cần plugin @container-query-polyfill
3D transforms: perspective, rotate-3d, translate-3d utilities mới
Gradient mở rộng: radial, conic gradients, interpolation modes
@starting-style: enter/exit transitions không cần JavaScript
not-* variant: đảo ngược bất kỳ variant nào, ví dụ not-odd:bg-red-500
Dynamic values: grid-cols-15 hoạt động ngay, không cần config
data-* variants: data-current:opacity-100 hoạt động tự động
P3 color palette: wide gamut colors bằng oklch, hiển thị sắc nét trên màn hình P3
Automatic content detection: tự tìm template files, bỏ cần khai báo content array
Lightning CSS: tích hợp sẵn vendor prefixing
Built-in import support: bỏ cần postcss-import

5. Cài Đặt Mới Đơn Giản Hơn

Method	Package cần cài
PostCSS	npm i tailwindcss @tailwindcss/postcss
Vite plugin	npm i tailwindcss @tailwindcss/vite
CLI	npm i @tailwindcss/cli

postcss-import, autoprefixer không còn cần — Tailwind v4 tích hợp sẵn tất cả. Yêu cầu Node.js 20+. Dùng Vite plugin cho hiệu suất tốt nhất.

Cài đặt 30 giây cho dự án mới:

npm create vite@latest my-app
cd my-app
npm i tailwindcss @tailwindcss/vite

6. Breaking Changes Phổ Biến

Bỏ utility deprecated: bg-opacity-* → opacity modifier (bg-black/50)
Rename shadow: shadow-sm → shadow-xs, shadow → shadow-sm, drop-shadow-sm → drop-shadow-xs
Plugin forms, typography: bỏ package riêng, dùng cách mới trong CSS
Safari 16.4+: yêu cầu @property support, color-mix()

Đây là những thay đổi cần lưu ý khi migrate. Tailwind cung cấp upgrade tool tự động phần lớn.

6.5. Container Queries Và Responsive Design Mới

Trước đây responsive design trong Tailwind chỉ dựa trên viewport breakpoints (sm, md, lg). Tailwind v4 bổ sung container queries như first-class API — component tự điều chỉnh theo kích thước của container cha thay vì toàn màn hình. Điều này cực kỳ hữu ích cho component library hoặc widget nhúng: một card có thể hiển thị dạng column khi nằm trong sidebar hẹp và dạng row khi nằm trong content rộng, tất cả bằng class thuần, không cần JavaScript. Cú pháp: @container trên container cha, sau đó dùng @sm:flex-row, @md:grid-cols-3 cho children.

7. Di Chuyển Từ V3 Sang V4

Các bước migrate khuyến nghị:

Chạy npx @tailwindcss/upgrade trên branch mới
Review diff kỹ — đặc biệt color space (sRGB → oklch)
Kiểm tra tất cả utility bị rename (shadow-sm → shadow-xs)
Test responsive breakpoints (nếu dùng custom)
Kiểm tra trình duyệt: Safari 16.4+, Chrome 111+, Firefox 128+

Nếu dự án cần tương thích trình duyệt cũ, giữ v3.4 vẫn được hỗ trợ. V4 yêu cầu trình duyệt hiện đại hơn do dùng @property và color-mix().

8. Kết Luận

Tailwind CSS v4 không chỉ “nhanh hơn” — nó thay đổi căn bản cách viết CSS. CSS-first config giúp design tokens trở thành native CSS variables, engine Oxide giảm thời gian build 3-182 lần, và JIT-only loại bỏ tradeoff giữa development speed và production performance. Cho developer đã quen v3, việc di chuyển cần thời gian để review diff và test, nhưng xứng đáng với hiệu suất cuối cùng. Đây là bản upgrade lớn nhất Tailwind từ ngày ra mắt.