Spacing (Padding & Margin) and Sizing (Width & Height)

The Spacing Scale

Tailwind uses a numeric scale where 1 unit = 0.25rem (4px):

• p-1 = 4px padding | p-2 = 8px | p-4 = 16px (1rem) | p-6 = 24px | p-8 = 32px
• px-4 = Horizontal padding (left & right)
• py-2 = Vertical padding (top & bottom)
• m-auto = Centering block containers

Sizing Classes:

• w-full (width: 100%) | w-1/2 (width: 50%) | w-64 (16rem)
• max-w-7xl mx-auto: Standard centered container pattern for widescreen desktops.