Sizing Scales

Visual reference of all default sizes.

Visual Reference

The following table visually represents all the radiuses that are available.

Reference Size Pixels Rem
size-0 0 0
size-1 1px 0.062rem
size-2 2px 0.125rem
size-4 4px 0.25rem
size-6 6px 0.375rem
size-8 8px 0.5rem
size-10 10px 0.625rem
size-12 12px 0.75rem
size-14 14px 0.875rem
size-16 16px 1rem
size-18 18px 1.125rem
size-20 20px 1.25rem
size-24 24px 1.5rem
size-28 28px 1.75rem
size-32 32px 2rem
size-36 36px 2.25rem
size-40 40px 2.5rem
size-48 48px 3rem
size-56 56px 3.5rem
size-64 64px 4rem
size-72 72px 4.5rem
size-80 80px 5rem
size-96 96px 6rem
size-112 112px 7rem
size-128 128px 8rem
size-144 144px 9rem
size-160 160px 10rem
size-192 192px 12rem
size-224 224px 14rem
size-256 256px 16rem
size-288 288px 18rem
size-320 320px 20rem
size-384 384px 24rem
size-448 448px 28rem
size-512 512px 32rem
size-576 576px 36rem
size-640 640px 40rem

Basic Usage

Combine each size variant with any size related property such as width, height, padding, margin, and etc.

<div class="w-32 h-32 ...">
<!-- 32px width and 32px height -->

<div class="mb-24 ...">
<!-- 20px margin-bottom -->