Tailwind Class Sorter

Tính năng nổi bật

• Xếp class theo mười lăm nhóm đúng thứ tự tài liệu chính thức, từ layout tới accessibility
• Nhận cả chuỗi class trần lẫn đoạn HTML hoặc JSX có thuộc tính class và className
• Giữ nguyên toàn bộ phần mã ngoài chuỗi class, chỉ thay đúng nội dung bên trong dấu nháy
• Gom biến thể hover, focus, md, lg, dark về đúng vị trí thay vì rải rác giữa chuỗi
• Phát hiện class lặp nguyên văn và cho phép tự động bỏ bớt khi xuất kết quả
• Phát hiện class xung đột như vừa p-4 vừa p-6, vừa flex vừa grid, vừa text-lg vừa text-sm
• Đưa class tự viết và class của thư viện khác lên đầu chuỗi để không lẫn vào nhóm tiện ích
• Bảng phân bố số class theo từng nhóm để thấy ngay chuỗi đang nặng về phần nào

Thứ tự class không đổi giao diện, nhưng đổi hẳn tốc độ đọc và sửa

Trình duyệt không quan tâm bạn viết class theo thứ tự nào, giao diện hiện ra vẫn thế. Nhưng con người thì có. Một chuỗi hai mươi class viết lộn xộn buộc người đọc phải quét hết từ đầu tới cuối chỉ để trả lời một câu hỏi đơn giản như phần tử này có đặt màu nền hay không. Khi thứ tự cố định, mắt biết chỗ cần nhìn: khoảng cách luôn nằm sau bố cục, màu nền luôn nằm trước viền, hiệu ứng luôn ở gần cuối. Lợi ích thứ hai lớn hơn và ít người nói tới, đó là hợp nhất mã nguồn. Hai người cùng thêm class vào một phần tử, một người thêm vào đầu chuỗi, một người thêm vào cuối, hệ thống quản lý phiên bản báo xung đột và ai đó phải ngồi ghép tay. Khi cả nhóm dùng chung một thứ tự, class mới luôn rơi vào đúng vị trí của nó nên hai thay đổi thường tự hòa vào nhau. Lợi ích thứ ba là phát hiện lỗi: khi các class cùng nhóm nằm cạnh nhau, việc bạn lỡ viết cả p-4 lẫn p-6 trở nên nhìn thấy được ngay chứ không nằm cách nhau mười class.

Lợi ích khi sử dụng

• •Chuỗi class dài đọc nhanh hơn vì mọi nhóm luôn nằm ở đúng vị trí quen thuộc
• •Giảm hẳn xung đột khi hợp nhất mã nguồn giữa nhiều người cùng sửa một phần tử
• •Bắt được class triệt tiêu nhau trước khi chúng gây lỗi giao diện khó lần
• •Áp dụng được cho cả dự án chưa cài công cụ định dạng tự động
• •Không đổi bất kỳ ký tự nào ngoài chuỗi class nên dán ngược vào tệp là dùng được

Cách sắp xếp một chuỗi class Tailwind

1. 1Dán chuỗi class hoặc cả đoạn HTML, JSX vào ô bên trái, công cụ tự nhận diện xem đầu vào là chuỗi trần hay đoạn mã.
2. 2Đọc kết quả đã sắp xếp ở ô bên phải, phần mã ngoài chuỗi class được giữ nguyên nên dán ngược lại được ngay.
3. 3Xem bảng phân bố theo nhóm để biết chuỗi đang nặng về bố cục, khoảng cách hay hiệu ứng.
4. 4Kiểm tra khối class trùng và khối class xung đột, đây là hai chỗ dễ sinh lỗi giao diện khó lần nhất.
5. 5Bật hoặc tắt công tắc bỏ class trùng tùy theo bạn muốn công cụ tự dọn hay chỉ muốn nó báo cho biết.
6. 6Bấm nút chép để lấy kết quả và dán trở lại vào tệp giao diện.

Mười lăm nhóm tiện ích và thứ tự giữa chúng

Thứ tự mà công cụ áp dụng bám theo mục lục tài liệu chính thức, đọc từ ngoài vào trong theo đúng cách một phần tử được dựng lên. Đầu tiên là nhóm bố cục quyết định phần tử tồn tại ở dạng nào và nằm ở đâu, gồm display, position, các cạnh, chỉ số lớp và tràn nội dung. Tiếp theo là nhóm sắp xếp con bên trong gồm flexbox và lưới. Sau đó tới khoảng cách rồi kích thước, hai nhóm quyết định phần tử chiếm bao nhiêu chỗ. Kế đến là chữ, nền, viền, ba nhóm quyết định phần tử trông ra sao. Rồi tới hiệu ứng đổ bóng và độ trong, các bộ lọc, nhóm bảng, chuyển động và biến hình. Cuối cùng là tương tác gồm con trỏ, vùng chọn, cuộn, sau đó là nhóm dành cho ảnh vector và nhóm hỗ trợ trợ năng. Logic chung của thứ tự này là đi từ thứ ảnh hưởng tới cả bố cục trang xuống dần tới thứ chỉ ảnh hưởng tới bản thân phần tử, nên khi đọc lướt bạn nắm được khung trước rồi mới tới chi tiết trang trí.

Biến thể được gom về đâu và vì sao lại theo thứ tự đó

Class không có biến thể luôn đứng trước toàn bộ chuỗi vì chúng là trạng thái mặc định, áp dụng cho mọi kích thước màn hình và mọi tương tác. Sau đó tới nhóm biến thể theo phần tử giả như before và after, rồi tới nhóm trạng thái tương tác gồm hover, focus, active, disabled, checked, tiếp đến là các biến thể vị trí trong danh sách như first, last, odd, even. Nhóm điểm ngắt màn hình xếp sau cùng trong phần biến thể thường, theo đúng thứ tự tăng dần sm, md, lg, xl rồi 2xl, vì Tailwind theo nguyên tắc màn hình nhỏ trước nên đọc từ trái sang phải chính là đọc từ màn hình nhỏ ra màn hình lớn. Cuối cùng là dark, print và các biến thể môi trường khác. Cách xếp này giúp một người mở tệp lên đọc được câu chuyện theo trình tự: mặc định trông thế này, khi rê chuột thì đổi thế kia, lên màn hình lớn thì đổi tiếp, ở chế độ tối thì đổi lần nữa. Khi một class có nhiều biến thể chồng nhau, chẳng hạn vừa md vừa hover, công cụ so sánh lần lượt từng biến thể một từ trái sang phải để quyết định vị trí.

Class xung đột: vì sao class đứng sau trong chuỗi không phải lúc nào cũng thắng

Đây là hiểu nhầm phổ biến nhất và cũng là nguyên nhân của nhiều giờ dò lỗi vô ích. Nhiều người nghĩ viết p-4 rồi viết p-6 ở sau thì p-6 thắng, giống như khi ghi đè trong một khối CSS. Thực tế không phải vậy. Thứ tự trong thuộc tính class hoàn toàn không có ý nghĩa với trình duyệt. Cái quyết định là thứ tự hai quy tắc đó xuất hiện trong tệp CSS mà Tailwind sinh ra, mà thứ tự đó do Tailwind quyết định chứ không do bạn. Nghĩa là bạn viết p-6 p-4 hay p-4 p-6 thì kết quả trên màn hình vẫn y hệt nhau, và nó là kết quả nào thì bạn không kiểm soát được từ chuỗi class. Hệ quả thực tế là mọi cặp class cùng đặt một thuộc tính đều phải bị loại bỏ, chỉ giữ đúng một. Công cụ này nhận diện các cặp như vậy theo thuộc tính CSS thật chứ không theo tên class, nên nó phân biệt được text-lg với text-red-500 là hai chuyện khác nhau dù cùng bắt đầu bằng text, và phân biệt border-2 đặt độ dày với border-red-500 đặt màu.

Class trùng nguyên văn và những chỗ chúng thường sinh ra

Class lặp lại y hệt trong cùng một chuỗi không gây lỗi giao diện, trình duyệt chỉ bỏ qua bản thứ hai. Nhưng nó là dấu hiệu rất đáng chú ý vì hầu như luôn xuất phát từ một trong ba tình huống. Tình huống thứ nhất là chép dán: ai đó chép một cụm class từ phần tử khác về, dán thêm vào cuối chuỗi mà không đọc lại phần đầu, thế là có hai bản. Tình huống thứ hai là ghép chuỗi động: khi bạn nối chuỗi class mặc định với chuỗi class truyền từ ngoài vào, cả hai bên cùng khai báo một class là chuyện thường xuyên xảy ra, và điều đáng lo không phải bản trùng mà là những class xung đột đi kèm trong hai chuỗi đó. Tình huống thứ ba là sửa dở dang: người trước định thay p-4 thành p-6, thêm p-6 vào mà quên xóa p-4, để lại một cặp xung đột nằm im. Vì vậy công cụ tách riêng hai báo cáo, một cho class trùng nguyên văn và một cho class xung đột, và cho phép bạn chọn tự động dọn phần trùng nhưng không tự động dọn phần xung đột, vì việc bỏ class nào trong cặp xung đột là quyết định của bạn chứ không phải của máy.

Class không nhận diện được, và vì sao chúng được đưa lên đầu chuỗi

Không phải class nào trong dự án cũng là tiện ích Tailwind. Bạn có thể có class tự viết cho một thành phần riêng, class do thư viện giao diện khác sinh ra, class dùng làm điểm bám cho mã kịch bản hoặc cho kiểm thử tự động, và class là tên component do chính bạn định nghĩa bằng lớp gộp. Khi gặp những class này, công cụ không cố đoán chúng thuộc nhóm nào mà đưa hết lên đầu chuỗi, giống cách công cụ định dạng chính thức xử lý. Lý do là hai đằng: thứ nhất, đặt chúng đứng riêng ở đầu giúp người đọc phân biệt ngay đâu là phần tiện ích chuẩn và đâu là phần riêng của dự án, không phải đoán; thứ hai, nếu trộn chúng vào giữa các nhóm tiện ích thì mỗi lần bạn thêm bớt class, vị trí của chúng lại nhảy lung tung và mọi lợi ích về giảm xung đột khi hợp nhất mã nguồn đều mất. Bảng phân bố theo nhóm hiển thị riêng số lượng class chưa nhận diện, và nếu con số đó lớn bất thường thì thường là do bạn đang dùng một bộ tiện ích tùy chỉnh chưa được thêm vào bảng tra cứu.

Câu hỏi thường gặp (FAQ)

Từ khóa liên quan

• sắp xếp class tailwind
• tailwind class sorter
• thứ tự class tailwind chuẩn
• prettier plugin tailwindcss thứ tự
• class tailwind trùng nhau
• class tailwind xung đột
• vừa p-4 vừa p-6 thì class nào thắng
• vừa flex vừa grid
• sắp xếp class hover md dark
• gom biến thể tailwind
• thứ tự nhóm tiện ích tailwind
• dọn chuỗi class tailwind dài
• format class tailwind online
• sắp xếp class trong jsx
• sắp xếp class trong html
• class tailwind không nhận diện
• giảm xung đột merge class tailwind
• công cụ sắp xếp class tailwind miễn phí
• kiểm tra class tailwind trùng lặp
• thứ tự breakpoint sm md lg xl