Skip to main content
Consistent spacing creates visual rhythm and hierarchy. We use Tailwind CSS’s spacing scale across the application.

​
Spacing Scale

ClassSizePixelsUsage
p-0 / m-000pxNo spacing
p-0.5 / m-0.50.125rem2pxMicro spacing
p-1 / m-10.25rem4pxTight spacing
p-2 / m-20.5rem8pxSmall spacing
p-3 / m-30.75rem12pxMedium-small spacing
p-4 / m-41rem16pxDefault spacing
p-5 / m-51.25rem20pxMedium spacing
p-6 / m-61.5rem24pxLarge spacing
p-8 / m-82rem32pxExtra large spacing
p-10 / m-102.5rem40pxSection spacing
p-12 / m-123rem48pxLarge section spacing

​
Gap Utilities

Use gap-* classes for consistent spacing in flex and grid layouts: 
<!-- Flex layout -->
<div class="flex gap-4">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

<!-- Grid layout -->
<div class="grid grid-cols-3 gap-6">
  <div>Card 1</div>
  <div>Card 2</div>
  <div>Card 3</div>
</div>

​
Common Patterns

Component Padding

Use p-4 for standard component padding, p-6 for cards and dialogs.

Stack Spacing

Use space-y-4 or gap-4 for vertical stacks of elements.

Inline Spacing

Use gap-2 for tight inline elements, gap-4 for standard spacing.

Section Margins

Use my-8 or my-12 to separate major page sections.

​
Responsive Spacing

Adjust spacing at different breakpoints: 
<div class="p-4 md:p-6 lg:p-8">
  <!-- Padding increases on larger screens -->
</div>

<div class="gap-4 md:gap-6">
  <!-- Gap increases on medium screens and up -->
</div>

​
Resources

Tailwind Spacing

Full spacing scale documentation and customization options.