Tailwind CSS v4: Có gì mới và cách di chuyển

Kiến trúc động cơ Oxide & Bối cảnh phát triển

Tailwind CSS v4 đã chính thức ra mắt, và nó đại diện cho một trong những cuộc đại tu quan trọng nhất trong lịch sử của framework này. Được viết lại từ đầu, v4 hứa hẹn thời gian build cực nhanh, trải nghiệm phát triển đơn giản hóa và một bộ công cụ thống nhất.

Bài viết phân tích các thay đổi kiến trúc cốt lõi trong Tailwind CSS v4 trong Tailwind CSS v4 và hướng dẫn quy trình di chuyển cho các ứng dụng hiện có.

Engine Oxide

Tính năng nổi bật của v4 là engine Oxide. Được viết bằng Rust, nó thay thế hoàn toàn pipeline xử lý dựa trên Node.js cũ. Kết quả? Thời gian build nhanh hơn tới 10 lần.

Đối với các nhà phát triển làm việc trên các codebase lớn, điều này có nghĩa là hot-module replacement (HMR) tức thì và thời gian pipeline CI/CD giảm đáng kể. Tốc độ phân tích của engine mới nhanh đến mức bạn sẽ hầu như không nhận thấy nó đang chạy.

Không cần cấu hình

Hãy nói lời tạm biệt với tailwind.config.js. Tailwind v4 áp dụng triết lý không cần cấu hình.

Cấu hình ưu tiên CSS

Thay vì một tệp cấu hình JavaScript cồng kềnh, việc tùy chỉnh giờ đây được thực hiện trực tiếp trong CSS của bạn bằng cách sử dụng các biến CSS tiêu chuẩn và các chỉ thị @theme mới.

@import "tailwindcss";

@theme {
  --color-primary: #3b82f6;
  --font-family-sans: 'Inter', sans-serif;
}

Cách tiếp cận này không chỉ đơn giản hóa việc thiết lập mà còn phù hợp hơn với các tính năng CSS gốc, giúp dễ dàng tích hợp với các công cụ và hệ thống thiết kế khác.

Phát hiện nội dung tự động

Trong các phiên bản trước, việc quản lý cẩn thận mảng content trong tệp cấu hình của bạn là rất quan trọng để đảm bảo các kiểu không bị loại bỏ sai. Tailwind v4 giới thiệu tính năng phát hiện nội dung tự động, thông minh. Nó phân tích cấu trúc dự án của bạn và tự động xác định tệp nào chứa các lớp Tailwind, loại bỏ nhu cầu chỉ định đường dẫn thủ công.

Cải thiện giá trị tùy ý

Các giá trị tùy ý đã được cải thiện để hỗ trợ các tính năng CSS phức tạp hơn. Giờ đây, bạn có thể dễ dàng viết các cấu trúc lồng nhau và các bộ chọn phức tạp trực tiếp trong HTML của mình.

<div class="hover:[&_p]:text-blue-500">
  <p>This text turns blue on hover</p>
</div>

Hướng dẫn di chuyển

Việc di chuyển lên v4 được thiết kế để không gây khó khăn nhất có thể, nhưng nó yêu cầu một vài bước do những thay đổi về kiến trúc.

Bước 1: Cập nhật các dependency

Cập nhật package.json của bạn để lấy các gói v4 mới nhất.

npm install tailwindcss@^4.0.0

Bước 2: Sử dụng công cụ di chuyển

Nhóm Tailwind đã cung cấp một công cụ CLI di chuyển chính thức tuyệt vời giúp xử lý 95% công việc nặng nhọc.

npx @tailwindcss/upgrade

Công cụ này sẽ:

• Chuyển đổi tailwind.config.js của bạn thành các biến @theme CSS.
• Cập nhật các chỉ thị @tailwind của bạn thành @import "tailwindcss" mới.
• Gắn cờ bất kỳ plugin hoặc tính năng không dùng nữa nào cần được chú ý thủ công.

Bước 3: Xác minh và kiểm tra

Chạy quy trình build của bạn và kiểm tra kỹ lưỡng giao diện người dùng của bạn. Đặc biệt chú ý đến bất kỳ plugin tùy chỉnh cao hoặc biến thể tùy ý phức tạp nào mà công cụ nâng cấp có thể đã gắn cờ.

Đúc kết kinh nghiệm & Lời khuyên thực tế

Tailwind CSS v4 là một bước nhảy vọt đáng kể, ưu tiên hiệu suất và trải nghiệm nhà phát triển hơn tất cả. Việc chuyển sang engine dựa trên Rust và cấu hình ưu tiên CSS làm cho framework nhanh hơn và dễ sử dụng hơn bao giờ hết. Hãy bắt đầu nâng cấp dự án của bạn ngay hôm nay và trải nghiệm tốc độ!

Bạn cũng có thể thích

• CSS Glassmorphism năm 2026: GPU Compositing, backdrop-filter & Tailwind Recipes
• Bảng màu tôi thực sự sử dụng thay vì mặc định của Tailwind
• Bắt đầu với Katalon Studio + Tự động hóa Bootstrap Date Picker
• Intersection Observer và getBoundingClientRect trong JavaScript: Phân tích sâu về hiệu suất

Các câu hỏi thường gặp