shadcn ra mắt 'cn', gộp class Tailwind nhanh hơn 30 lần

cn nhảy thẳng vào dự án Tailwind của bạn, thay thế luôn clsx lẫn tailwind-merge, chạy nhanh gấp 30 lần mà không bắt bạn sửa lại dòng code nào.

Hai lập trình viên shadcn và aidenybai vừa ra mắt cn — một engine độc lập (zero-dependency) chuyên gộp class Tailwind và giải quyết đụng độ class. Qua 356.000 bài test đối chiếu, cn cho kết quả giống hệt 100% so với bộ đôi tailwind-merge và clsx, nhưng đã bỏ qua các bước xử lý chuỗi thừa để tăng tốc. Tool này chạy trên mọi framework và mọi dự án Tailwind CSS v4 — không hề bắt bạn phải xài component shadcn/ui.

Tại sao nên quan tâm: Với các lần gọi component thông thường, cn gộp class chỉ mất 10 nanosecond, trong khi cách làm cũ tốn tận 320 nanosecond. Khi chạy benchmark thực tế trên 58 repository mã nguồn mở, cn đạt tốc độ trung bình nhanh hơn 37 lần dù dung lượng file đã nén nhẹ vỏn vẹn 26 KB. Tức là client render nhanh hơn, chạy trên edge nhẹ hơn mà bạn chẳng phải viết lại dòng code cũ nào.

Để đổi sang cn, bạn chạy npx shadcn@latest migrate cn hoặc cài trực tiếp bằng npm i cn. Trong dự án hiện tại, chỉ cần sửa lại file @/lib/utils thành export { cn } from "cn" rồi xoá clsx và tailwind-merge khỏi dependencies là xong.

Cú pháp viết component giữ nguyên hoàn toàn, nhưng vòng lặp render của bạn thì vừa được tăng tốc đáng kể.