Tailwind CSS v4 có gì mới? Hướng dẫn nâng cấp và tối ưu CSS Engine siêu tốc

Phiên bản Tailwind CSS v4 chính thức ra mắt mang đến bước tiến khổng lồ về hiệu năng với công nghệ Oxide Engine được viết lại 100% bằng ngôn ngữ Rust. Tốc độ compile CSS giờ đây nhanh hơn **gấp 10 lần** so với phiên bản v3 cũ!

1. 4 Điểm mới đột phá trong Tailwind CSS v4

1. Compiler Oxide Engine siêu tốc bằng Rust

Thời gian biên dịch CSS full project giảm từ vài giây xuống **chỉ còn vài miligiây**, giúp trải nghiệm Hot Reload trong Next.js mượt mà không chút độ trễ.

2. Khai báo Cấu hình trực tiếp trong file CSS (CSS-first configuration)

Tạm biệt file tailwind.config.js cồng kềnh! Trong Tailwind v4, bạn khai báo theme tùy chỉnh trực tiếp ngay trong file CSS bằng chỉ thị @theme:

@import "tailwindcss";

@theme {
  --color-primary: #1890ff;
  --font-display: "Inter", sans-serif;
  --breakpoint-3xl: 120rem;
}

3. Tự động phát hiện Template Files (Zero-configuration Content)

Không cần khai báo mảng content: ["./src/**/*.{js,ts,jsx,tsx}"] nữa! Tailwind v4 tự động quét và phát hiện tất cả các file mã nguồn trong dự án của bạn.

4. Hỗ trợ Container Queries & Dynamic Color Spaces (OKLCH) Native

Tích hợp sẵn các dải màu hiện đại OKLCH giúp màu sắc hiển thị tươi tắn và chân thực hơn trên các màn hình Retina cao cấp.

2. Nâng cấp lên Tailwind CSS v4 trong Next.js

Cập nhật các gói phụ thuộc mới nhất:

pnpm add tailwindcss@next @tailwindcss/postcss@next

Kết luận

Tailwind CSS v4 khẳng định vị thế số 1 không thể thay thế trong phát triển giao diện Web hiện đại. Uwmee Software áp dụng Tailwind CSS v4 tối ưu dung lượng CSS siêu nhẹ cho mọi dự án làm web. Đọc thêm bài viết thiết kế giao diện Dark Mode với Tailwind.