Tailwind CSS 4.2 chính thức ra mắt: Plugin Webpack, bảng màu mới và cải thiện hiệu suất vượt trội

Tailwind CSS phiên bản 4.2.0 vừa được phát hành vào ngày 18 tháng 2 năm 2026, đánh dấu một bước tiến nhỏ nhưng ý nghĩa đối với framework CSS theo hướng utility-first này. Bản cập nhật tiếp nối sự thay đổi kiến trúc lớn từ phiên bản 4.0, mang đến plugin Webpack tích hợp sẵn (first-class), bốn bảng màu mặc định mới, mở rộng hỗ trợ các thuộc tính logic và cải thiện đáng kể tốc độ biên dịch lại.

Tích hợp Webpack đơn giản hóa

Một trong những tính năng nổi bật nhất của bản phát hành này là gói @tailwindcss/webpack mới. Trước đây, các nhà phát triển sử dụng webpack phải cấu hình Tailwind thông qua PostCSS một cách thủ công, tạo ra nhiều mã mẫu (boilerplate) phức tạp. Plugin mới này giúp đưa Tailwind vào quy trình webpack một cách trực tiếp mà không cần cấu hình PostCSS, giúp các dự án sử dụng webpack có trải nghiệm tích hợp mượt mà tương tự như Vite.

Đây là tin vui cho các đội ngũ đang làm việc trên các ứng dụng đã được thiết lập từ trước và chưa sẵn sàng để chuyển đổi sang các công cụ build khác.

Bảng màu mới và xu hướng thiết kế

Về mặt thị giác, Tailwind 4.2 bổ sung thêm bốn bảng màu mặc định mới: mauve (màu tím nhạt), olive (màu ô liu), mist (màu sương mù) và taupe (màu nâu xám). Những tông màu trầm, thiên về trung tính này phản ánh xu hướng thiết kế hiện đại đang chuyển dịch từ các bảng màu rực rỡ sang gam màu tinh tế hơn. Điều này mang lại cho các nhà thiết kế nhiều sự lựa chọn hơn khi làm việc với chủ đề mặc định của Tailwind mà không cần can thiệp vào cấu hình tùy chỉnh.

Mở rộng hỗ trợ thuộc tính logic

Hỗ trợ thuộc tính logic (logical properties) được mở rộng đáng kể trong bản phát hành này, mang lại lợi ích lớn cho việc phát triển ứng dụng đa ngôn ngữ. Tailwind giờ đây cung cấp các tiện ích cho padding theo hướng khối (pbs-, pbe-), margin (mbs-, mbe-), viền (border-bs, border-be), cũng như các tiện ích scroll padding và scroll margin.

Ngoài ra, các tiện ích kích thước inline và block mới cũng được thêm vào, ánh xạ trực tiếp tới các thuộc tính inline-size và block-size của CSS. Các tiện ích cũ như start-* và end-* đã bị đánh dấu lỗi thời để ủng hộ các phiên bản ngữ nghĩa rõ ràng hơn như inline-s-* và inline-e-*. Những thay đổi này đặc biệt quan trọng đối với các sản phẩm cần hỗ trợ chế độ viết từ phải sang trái (RTL) hoặc dọc.

Hiệu suất vượt trội

Có lẽ khía cạnh được cộng đồng lập trình viên quan tâm nhất là sự cải thiện hiệu suất. Tim Neutkens, người đứng đầu dự án Next.js tại Vercel, đã xác nhận việc đo được tốc độ biên dịch lại nhanh hơn 3.8 lần trên ứng dụng lớn nhất của họ sau khi áp dụng bản cập nhật này.

Cải thiện hiệu suất này áp dụng cho tất cả các tích hợp bao gồm Next.js, Vite, Webpack và PostCSS, giúp quy trình phát triển trở nên mượt mà hơn đáng kể.

Lộ trình nâng cấp từ phiên bản 3

Đối với các đội ngũ vẫn đang sử dụng Tailwind CSS v3, quá trình nâng cấp lên v4 vẫn là một bước riêng biệt và phức tạp hơn. Tailwind đã cung cấp hướng dẫn nâng cấp chi tiết bao gồm các thay đổi mang tính phá vỡ (breaking changes), sự chuyển dịch sang cấu hình ưu tiên CSS, thay đổi hành vi của @apply và các yêu cầu hỗ trợ trình duyệt mới (Safari 16.4+, Chrome 111+, Firefox 128+).

Một công cụ di chuyển tự động cũng có sẵn thông qua lệnh npx @tailwindcss/upgrade để xử lý phần lớn các thay đổi cơ bản. Tuy nhiên, một số nhà phát triển đã phản ánh về những khó khăn khi chuyển đổi code sử dụng @apply, đặc biệt là với các thư viện component phụ thuộc vào nó.

Tailwind CSS là một framework CSS ưu tiên các tiện ích (utility-first), cung cấp các lớp composable ở mức thấp để tạo kiểu trực tiếp trong markup. Thay vì viết CSS tùy chỉnh cho từng thành phần, các đội ngũ có thể lắp ghép giao diện từ các tiện ích được định nghĩa sẵn, giúp tăng tốc độ phát triển UI đồng thời giữ cho phong cách nhất quán trên toàn bộ codebase.