Tra Cứu Tailwind CSS

Tra bất kỳ class tiện ích nào của Tailwind và xem chính xác đoạn CSS mà nó sinh ra. Toàn bộ danh mục được tạo từ gói tailwindcss đang cài trong dự án này, nên các giá trị khớp với đúng phiên bản bạn đang build chứ không phải một bản major cũ hơn.

Các bước sử dụng

1. Gõ vào ô Tìm class hoặc CSS. Ô này tìm cả hai phía — gõ flex để tìm theo tên class, padding để tìm theo khai báo CSS, hoặc hover: để tìm theo biến thể.
2. Thu hẹp danh sách bằng ô Nhóm; mỗi mục hiện luôn số tiện ích nó chứa, và Tất cả nhóm đưa mọi thứ trở lại.
3. Bật Giá trị đã thay thế để xem chính các khai báo đó nhưng đã thay các token của theme mặc định vào — nghĩa là var(--spacing) và những custom property khác được thay bằng con số thật mà chúng quy về.
4. Đọc từng dòng: tên class ở bên trái, đoạn CSS nó sinh ra ở bên phải, và một ghi chú màu xanh ở những tiện ích cần giải thích thêm.
5. Bấm vào một dòng bất kỳ để sao chép tên class vào clipboard.
6. Khi kết quả nhiều hơn một màn hình, nút Xem thêm nạp tiếp khối sau; dòng Đang hiện phía trên cho biết đang hiển thị bao nhiêu trên tổng số kết quả.

Mẹo

• Đoạn CSS hiển thị là output thật do trình biên dịch Tailwind v4 sinh ra — gồm cả thang --spacing, các custom property của theme và các lớp --tw-* mà v4 dùng để ghép shadow, filter và transform. Đây không phải bản viết tay gần đúng.
• Giá trị đã thay thế là cách nhanh nhất để trả lời "rốt cuộc p-4 là bao nhiêu pixel?". Tắt thì bạn thấy Tailwind ghép quy tắc ra sao; bật thì bạn thấy trình duyệt cuối cùng áp dụng cái gì.
• Có những tiện ích không có gì để quy đổi — chúng không chứa token nào của theme — và trang nói rõ điều đó thay vì giả vờ như công tắc vừa làm gì đó.
• Số phiên bản và tổng số mục được ghi ở khung thông báo trên cùng và nhắc lại ở chú thích cuối trang, nên bạn biết ngay mình đang tra bản Tailwind nào.
• Mẹo đáng nhớ nhất là tìm theo phía CSS: nếu bạn biết khai báo mình cần nhưng không nhớ tên class, hãy gõ thẳng thuộc tính đó.

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

Dữ liệu này lấy từ đâu?

Nó được sinh ra từ gói tailwindcss cài trong dự án này bằng chính trình biên dịch của Tailwind, nên luôn mô tả đúng phiên bản đó. Không có gì được tải về lúc chạy.

Công tắc Giá trị đã thay thế thay đổi những gì?

Chỉ cột bên phải. Nó đổi khai báo thô đang sinh ra thành cùng khai báo đó nhưng đã thế các custom property của theme mặc định vào, giúp các giá trị số đọc được ngay.

Vì sao lần đầu vào trang danh mục hiện ra hơi chậm?

Vì đây là một tập dữ liệu khá lớn nên nó được nạp thành một chunk riêng thay vì đóng gói sẵn trong trang. Trong lúc chờ, trang hiển thị khung xương, và nếu tải thất bại sẽ có nút Thử lại.

Nó có bao gồm theme tùy chỉnh của dự án tôi không?

Không. Trang chỉ hiển thị theme mặc định của Tailwind. Những gì bạn ghi đè trong cấu hình riêng sẽ khác với các giá trị đã quy đổi ở đây.