| sm | ≥ 640px | |
| md | ≥ 768px | |
| lg | ≥ 1024px | |
| xl | ≥ 1280px | |
| 2xl | ≥ 1536px |
| .font-thin | font-weight: 100; | 100 |
| .font-extralight | font-weight: 200; | 200 |
| .font-light | font-weight: 300; | 300 |
| .font-normal | font-weight: 400; | 400 |
| .font-medium | font-weight: 500; | 500 |
| .font-semibold | font-weight: 600; | 600 |
| .font-bold | font-weight: 700; | 700 |
| .font-extrabold | font-weight: 800; | 800 |
| .font-black | font-weight: 900; | 900 |
| .rounded-none | border-radius: 0; | 0 |
| .rounded-sm | border-radius: 0.125rem; | 2px |
| .rounded | border-radius: 0.25rem; | 4px |
| .rounded-md | border-radius: 0.375rem; | 6px |
| .rounded-lg | border-radius: 0.5rem; | 8px |
| .rounded-xl | border-radius: 0.75rem; | 10px |
| .rounded-2xl | border-radius: 1rem; | 12px |
| .rounded-3xl | border-radius: 1.5rem; | 16px |
| .rounded-full | border-radius: 9999px; |
| 0 | 0 | |
| px | 1px | |
| 0.5 | 0.125rem | 2px |
| 1 | 0.25rem | 4px |
| 1.5 | 0.375rem | 6px |
| 2 | 0.5rem | 8px |
| 2.5 | 0.625rem | 10px |
| 3 | 0.75rem | 12px |
| 3.5 | 0.875rem | 14px |
| 4 | 1rem | 16px |
| 5 | 1.25rem | 20px |
| 6 | 1.5rem | 24px |
| 7 | 1.75rem | 28px |
| 8 | 2rem | 32px |
| 9 | 2.25rem | 36px |
| 10 | 2.5rem | 40px |
| ... | ... | ... |