Ghi chú nâng cấp Tailwind v4 từ mười hai sản phẩm

Chúng tôi đã chuyển toàn bộ danh mục sản phẩm sang Tailwind v4. Đây là ghi chú sau khi hoàn tất.

Đưa token vào CSS mới là thay đổi thật sự

@theme thay thế tệp config JavaScript. Màu sắc, khoảng cách và phông chữ của bạn trở thành các custom property CSS, nghĩa là chúng đọc được ở runtime — bởi component của bạn, bởi inline style, bởi một shader WebGL cần màu thương hiệu. Chỉ riêng điều đó đã loại bỏ một dạng trùng lặp, khi cùng một mã màu từng phải xuất hiện ở cả tailwind.config.js và một hằng số TypeScript.

Những gì đã hỏng

Các plugin giá trị tùy ý mà chúng tôi từng viết theo API plugin của v3. Phần lớn đã được thay bằng tính năng có sẵn của v4 và bị xóa hẳn. Một số cần viết lại thành CSS thuần, và sau đó đọc còn dễ hiểu hơn.

Mọi thứ phụ thuộc vào thứ tự chính xác của các utility được sinh ra. Nếu bạn từng dựa vào những tình huống độ ưu tiên tình cờ, v4 sẽ giúp bạn phát hiện hết.

Những gì tốt hơn

Thời gian build, cải thiện rõ rệt. Cách xử lý màu bằng oklch, giúp việc sinh ra một bảng màu dễ tiếp cận từ một màu thương hiệu trở nên thật sự dự đoán được. Container query trở thành tính năng hạng nhất — các widget dashboard tự điều chỉnh theo khung chứa thay vì theo khung nhìn giờ đây quá đơn giản.

Điều chúng tôi sẽ làm khác đi

Định nghĩa toàn bộ bảng màu sáng trên :root thuần trước, rồi chỉ ghi đè những gì thay đổi ở chế độ tối. Ban đầu chúng tôi chia token ra cả hai khối, và mỗi biến bị thiếu lại trở thành một lỗi theme chỉ xuất hiện với những người dùng có thiết lập hệ thống mà chúng tôi chưa kiểm thử.