Uniform CSS - Sizing Scales

Visual Reference

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

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

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>