Cách hoạt động
Tìm kiếm
Ô tìm so khớp tên class, đoạn CSS mà class sinh ra và ví dụ đi kèm, không phân biệt hoa thường. Vì vậy bạn có thể tra p-4, hoặc gõ thuộc tính bạn nhớ (grid-template-columns, font-weight) để tìm class tương ứng. Kết quả đầu tiên được chọn ngay khi bạn gõ.
Các class được chia nhóm như tài liệu Tailwind: bố cục (display, position, flexbox, grid, căn chỉnh), khoảng cách và kích thước, chữ, nền, viền, hiệu ứng, chuyển động và các tiền tố trạng thái.
Mẫu xem trực tiếp
Với class tương ứng một đoạn CSS thuần, khai báo đó được áp vào một mẫu ở khung bên phải: ba khối đánh số cho class bố cục (khối giữa nhận các class tác động lên phần tử con như col-span-2 hay grow), một hộp có khoảng đệm cho class khoảng cách, một dòng chữ cho class kiểu chữ, một ô màu cho màu nền, và một hộp có nhãn cho kích thước, viền, đổ bóng và biến đổi.
Giá trị khoảng cách theo thang mặc định của Tailwind, mỗi bậc là 0,25rem (4px khi cỡ chữ mặc định của trình duyệt là 16px), nên p-4 bằng 1rem.
khoảng cách n = n × 0,25rem
Tiền tố
Điểm ngắt (sm:, md:, lg:…) và trạng thái (hover:, focus:, dark:…) tự chúng không tạo style; chúng quyết định khi nào class đứng sau được áp dụng. Mục của chúng hiện một ví dụ dùng tiền tố thay cho mẫu xem.
