Xem spacing scale Tailwind đầy đủ hoặc tạo custom scale — visualize bằng thanh bar, copy CSS variables hoặc JSON config
Tailwind v3 Spacing Scale
Base 4px · 34 tokens
| Token | px | rem | Visual | Tailwind classes |
|---|---|---|---|---|
| 0 | 0 | 0 | 0px | p-0m-0gap-0w-0 |
| 0.5 | 2 | 0.125 | 2px | p-0.5m-0.5gap-0.5w-0.5 |
| 1 | 4 | 0.25 | 4px | p-1m-1gap-1w-1 |
| 1.5 | 6 | 0.375 | 6px | p-1.5m-1.5gap-1.5w-1.5 |
| 2 | 8 | 0.5 | 8px | p-2m-2gap-2w-2 |
| 2.5 | 10 | 0.625 | 10px | p-2.5m-2.5gap-2.5w-2.5 |
| 3 | 12 | 0.75 | 12px | p-3m-3gap-3w-3 |
| 3.5 | 14 | 0.875 | 14px | p-3.5m-3.5gap-3.5w-3.5 |
| 4 | 16 | 1 | 16px | p-4m-4gap-4w-4 |
| 5 | 20 | 1.25 | 20px | p-5m-5gap-5w-5 |
| 6 | 24 | 1.5 | 24px | p-6m-6gap-6w-6 |
| 7 | 28 | 1.75 | 28px | p-7m-7gap-7w-7 |
| 8 | 32 | 2 | 32px | p-8m-8gap-8w-8 |
| 9 | 36 | 2.25 | 36px | p-9m-9gap-9w-9 |
| 10 | 40 | 2.5 | 40px | p-10m-10gap-10w-10 |
| 11 | 44 | 2.75 | 44px | p-11m-11gap-11w-11 |
| 12 | 48 | 3 | 48px | p-12m-12gap-12w-12 |
| 14 | 56 | 3.5 | 56px | p-14m-14gap-14w-14 |
| 16 | 64 | 4 | 64px | p-16m-16gap-16w-16 |
| 20 | 80 | 5 | 80px | p-20m-20gap-20w-20 |
| 24 | 96 | 6 | 96px | p-24m-24gap-24w-24 |
| 28 | 112 | 7 | 112px | p-28m-28gap-28w-28 |
| 32 | 128 | 8 | 128px | p-32m-32gap-32w-32 |
| 36 | 144 | 9 | 144px | p-36m-36gap-36w-36 |
| 40 | 160 | 10 | 160px | p-40m-40gap-40w-40 |
| 44 | 176 | 11 | 176px | p-44m-44gap-44w-44 |
| 48 | 192 | 12 | 192px | p-48m-48gap-48w-48 |
| 52 | 208 | 13 | 208px | p-52m-52gap-52w-52 |
| 56 | 224 | 14 | 224px | p-56m-56gap-56w-56 |
| 60 | 240 | 15 | 240px | p-60m-60gap-60w-60 |
| 64 | 256 | 16 | 256px | p-64m-64gap-64w-64 |
| 72 | 288 | 18 | 288px | p-72m-72gap-72w-72 |
| 80 | 320 | 20 | 320px | p-80m-80gap-80w-80 |
| 96 | 384 | 24 | 384px | p-96m-96gap-96w-96 |
Điểm nổi bật
Các điểm đáng chú ý nhất của công cụ này để bạn nắm nhanh trước khi dùng.
Xem đầy đủ bảng spacing scale của Tailwind CSS từ 0 đến 96 với giá trị px và rem tương ứng.
Mỗi mức khoảng cách được minh hoạ bằng thanh màu có chiều dài tỉ lệ thực, giúp dễ so sánh trực quan.
Nhập base size và tỉ lệ nhân để tạo spacing scale riêng phù hợp với hệ thống design của bạn.
Copy toàn bộ thang đo dưới dạng CSS custom properties hoặc JSON để dùng trong design token.
Cách sử dụng
Làm theo từng bước để dùng công cụ nhanh và đúng intent ngay từ lần đầu.
Tìm kiếm theo token (như "4", "px", "0.5") hoặc cuộn bảng để xem toàn bộ thang đo mặc định.
Nhìn vào thanh màu bên cạnh mỗi giá trị để ước lượng khoảng cách so với các mức khác.
Nhập kích thước cơ sở và hệ số nhân, công cụ sẽ tạo ra dãy spacing scale theo hàm mũ.
Chọn định dạng CSS variables hoặc JSON rồi copy để dán vào file config hoặc token của dự án.
Câu hỏi thường gặp
Những câu hỏi gặp nhiều nhất khi dùng công cụ, được trình bày ngắn gọn và dễ quét.