Spacing

When to use each size

• •XS (4px): Tight spacing within components, icon margins, badge gaps
• •SM (8px): Small component padding, compact lists, inline elements
• •MD (16px): Default component padding, standard gaps between related elements
• •LG (24px): Spacing between component groups, card padding
• •XL (32px): Section padding, spacing between major content blocks
• •2XL-5XL (40px-80px): Page margins, hero sections, major layout divisions

Best Practices

• •Use spacing scale values instead of arbitrary numbers
• •Maintain consistent spacing patterns throughout the interface
• •Use larger spacing to create visual hierarchy and grouping
• •Consider touch target sizes (minimum 44x44px) for interactive elements
• •Test spacing at different viewport sizes and zoom levels

Tailwind Utilities

When using Tailwind CSS, spacing values are available through standard utilities:

<!-- Padding -->
<div className="p-xs">4px padding</div>
<div className="p-md">16px padding</div>
<div className="px-lg py-md">24px horizontal, 16px vertical</div>

<!-- Margin -->
<div className="m-sm">8px margin</div>
<div className="mt-xl mb-lg">32px top, 24px bottom</div>

<!-- Gap (for flexbox/grid) -->
<div className="flex gap-md">16px gap</div>
<div className="grid gap-lg">24px gap</div>

Accessibility

• •Ensure interactive elements have sufficient padding for touch targets (min 44x44px)
• •Use spacing to create clear visual groups for screen reader users
• •Spacing scales proportionally with user font size preferences (rem units)
• •Maintain consistent spacing patterns to help users build mental models