Tailwind CSS v4: Tốc độ 100x nhờ engine Rust Oxide, cấu hình không cần config

Tailwind CSS v4 đại tuợng thay đổi hoàn toàn cách chúng ta xây dựng giao diện web với CSS. Ra mắt vào tháng 1 năm 2025, phiên bản này chuyển đổi từ engine JavaScript (PostCSS) sang engine Oxide bằng Rust được viết lại hoàn toàn, mang lại tốc độ nhanh hơn mà không cần bất kỳ cấu hình nào. Đây không chỉ là một bản cập nhật tính năng — đây là cuộc cách mệnh của framework CSS utility-first trở thành tiêu chuẩn thực sự của cộng đồng phát triển web.

Công nghệ mới trong Tailwind CSS v4

Hai thay đổi lớn nhất trong Tailwind v4 so với v3 là gì?

• Engine Oxide: Viết bằng Rust thay thế JavaScript, mang lại tốc độ full rebuild nhanh 3.5× và incremental build nhanh tới 100×.
• Cấu hình CSS-first: Thay vì tailwind.config.js bằng JavaScript, v4 sử dụng @theme, @custom-variant và @utility ngay trong file CSS.

Điều này có nghĩa là bạn có thể bỏ qua cài đặt config phức tạp. Chỉ cần một dòng duy nhất trong CSS:

@import "tailwindcss";

Cấu hình zero-config

Trong phiên bản trước, Tailwind v3 yêu cầu bạn cấu hình tailwind.config.js để chỉ thị thư mục chứa template:

// tailwind.config.js (Tailwind v3)
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: { extend: {} }
}

Với Tailwind v4, toàn bộ cấu hình được di chuyển vào CSS thông qua @theme:

/* styles.css (Tailwind v4) */
@import "tailwindcss";

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

Quan trọng: Tailwind v4 tự động khám phá các file template, không cần bạn đưa ra danh sách content thủ công. Điều này giúp tránh việc quên thêm file mới vào danh sách cấu hình.

Các tiện ích mới nổi bật

Tailwind v4.1+ đã thêm nhiều utility mới giúp bạn xây dựng giao diện mà không cần viết CSS tùy chỉnh:

Container Queries và Modern CSS

Một trong những tính năng mạnh nhất là container queries. Thay vì dựa trên viewport breakpoints, container queries cho phép bạn responsive một phần tử dựa trên kích thước của container chứa nó. Điều này giải quyết việc card component có kích thước khác nhau trên cùng một trang.

.card {
  container-type: inline-size;
}
@container (min-width: 400px) {
  /* style chỉ áp dụng khi .card rộng hơn 400px */
}

Migrating từ Tailwind v3 sang v4

Để nâng cấp từ v3 lên v4, đội phát triển Tailwind đã cung cấp công cụ tự động:

# Cài đặt upgrade tool
npm install -D @tailwindcss/upgrade

# Chạy migration tự động
npx @tailwindcss/upgrade

Công cụ này sẽ tự động:

• Chuyển tailwind.config.js sang CSS @theme.convert();
• Đổi tên class gray-500 sang gray-500/50 nếu dùng opacity.
• Cập nhật custom plugin sang @utility.
• Tối ưu content paths — bạn có thể xóa hoàn toàn.

Tốc độ thực tế: Benchmark chính thức

Theo trang chủ Tailwind, các benchmark được chạy trên Catalyst template (project thực tế của Tailwind Labs):

Adoption toàn cầu

Tailwind CSS vẫn là framework CSS được yêu thích nhất cộng đồng phát triển:

• 97.419+ sao GitHub — một trong những repo được yêu thích nhất mọi thời đại.
• 125 triệu+ downloads/tuần trên npm — số lượng khổng lồ.
• 61 open issues — cực kỳ thấp cho một dự án quy mô này.
• MIT license — hoàn toàn miễn phí cho mọi dự án.

Dark Mode nâng cao và Color Palette mới

Tailwind v4 mang lại sự hỗ trợ dark mode tốt hơn. Thay vì dùng class dark:, v4 hỗ trợ color-scheme utilities, cho phép bạn tùy chỉnh hành vi dark mode ở cấp độ element. Scrollbar cũng tự động thay đổi màu theo dark mode nhờ scrollbar-* utilities.

Bảng màu cũng được hiện đại hóa từ sRGB sang OKLCH — không gian màu rộng hơn, màu sắc rực rỡ hơn và nhất quán hơn giữa các trình duyệt. Điều này giúp thiết kế dark mode trông chuyên nghiệp hơn mà không cần tinh chỉnh thủ công.

Tích hợp Lightning CSS

Tailwind v4 sử dụng Lightning CSS (cũng được viết bằng Rust) để xử lý CSS nesting, autoprefixer và minification. Điều này loại bỏ sự phụ thuộc vào PostCSS và các plugin bên thứ ba, giảm đáng kể phụ thuộc và kích thước node_modules. CSS nesting hoạt động ngay lập tức mà không cần plugin.

Lắp đặt nhanh với Vite

Tailwind v4 tích hợp sẵn plugin Vite chính thức. Chỉ cần một vài dòng cấu hình:

# npm
npm install tailwindcss@latest @tailwindcss/vite@latest

# src/app.css
@import "tailwindcss";

# vite.config.js
import tailwindcss from "@tailwindcss/vite";
export default {
  plugins: [tailwindcss()],
}

Với PostCSS, bạn dùng @tailwindcss/postcss. Cả hai đều hoạt động tương tự nhờ engine Oxide chung.

Kết luận

Tailwind CSS v4 không chỉ là một bản cập nhật — đây là cuộc cách mệnh chuyển đổi framework CSS utility-first thành tiêuchuẩn thực sự của cộng đồng phát triển web. Với engine Oxide bằng Rust mang lại tốc độ nhanh gấp 100×, cấu hình CSS-first giúp bạn tập trung vào thiết kế thay vì cấu hình, cùng hàng loạt utility mới như container queries và text-shadow, Tailwind v4 chắc chắn là lựa chọn hàng đầu cho các dự án web hiện đại. Bắt đầu khám phá ngay hôm nay tại tailwindcss.com/docs và bài viết phát hành v4 chính thức.