Tailwind CSS v4 có gì mới? Hướng dẫn migrate từ Tailwind v3 và đo lường build speed

Kỷ nguyên mới của Tailwind CSS: Động cơ Oxide bằng Rust#

Tailwind CSS v4 là bản nâng cấp toàn diện nhất trong lịch sử framework này. Thay vì dựa vào file cấu hình tailwind.config.js nặng nề và hệ thống plugin PostCSS cũ kỹ, Tailwind v4 được viết lại hoàn toàn bằng ngôn ngữ Rust với động cơ Oxide.

Tốc độ build nhanh gấp 10 lần, hỗ trợ các tính năng CSS hiện đại nhất (CSS Variables, @theme, Color-mix) trực tiếp trong file CSS.

3 Thay đổi đột phá lớn nhất trong Tailwind v4#

1. Không còn file tailwind.config.js#

Mọi cấu hình theme màu sắc, font chữ giờ đây được khai báo tự nhiên bằng cú pháp CSS chuẩn ngay trong file global.css:

@import "tailwindcss";

@theme {
  --color-brand-primary: #f97316;
  --color-brand-dark: #18181b;
  --font-display: "Inter", sans-serif;
}

2. Tự động phát hiện Template Files (Zero-config Content)#

Bạn không cần phải viết mảng content: ['./src/**/*.{astro,html,js,jsx,ts,tsx}'] nữa. Động cơ Oxide tự động quét mã nguồn và nhận diện class chỉ trong vài mili-giây.

3. Tích hợp Dynamic Values linh hoạt#

Hỗ trợ trực tiếp các giá trị biến CSS động: bg-(--custom-color) hoặc grid-cols-(--columns-count).

Đo lường tốc độ Build thực tế trên dự án 200 components#

• Tailwind CSS v3 (JavaScript): Thời gian build trung bình: 3.8 giây.
• Tailwind CSS v4 (Oxide Rust): Thời gian build giảm còn 0.35 giây (Nhanh hơn 10.8 lần!).
• Quá trình Hot Module Replacement (HMR) khi chỉnh sửa class diễn ra gần như tức thì (<15ms).

Hướng dẫn di chuyển tự động (Migration Tool)#

Chạy công cụ chuyển đổi chính thức của đội ngũ Tailwind:

npx @tailwindcss/upgrade@next

Góc thảo luận#

Anh em đã thử nghiệm Tailwind v4 trên các dự án cá nhân hay production chưa? Cảm giác bỏ file tailwind.config.js chuyển sang thuần CSS thế nào?

Xem thêm nội dung liên quan:

• Học UI/UX & Frontend Styling
• Review công cụ lập trình web