New

Stable version of Uniform CSS now officially released! Release note

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>

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