Spacing

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

Spacing Scale

Class	Size	Pixels	Usage
`p-0` / `m-0`	0	0px	No spacing
`p-0.5` / `m-0.5`	0.125rem	2px	Micro spacing
`p-1` / `m-1`	0.25rem	4px	Tight spacing
`p-2` / `m-2`	0.5rem	8px	Small spacing
`p-3` / `m-3`	0.75rem	12px	Medium-small spacing
`p-4` / `m-4`	1rem	16px	Default spacing
`p-5` / `m-5`	1.25rem	20px	Medium spacing
`p-6` / `m-6`	1.5rem	24px	Large spacing
`p-8` / `m-8`	2rem	32px	Extra large spacing
`p-10` / `m-10`	2.5rem	40px	Section spacing
`p-12` / `m-12`	3rem	48px	Large 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.

Foundations

Components

Guidelines

Spacing Scale

Gap Utilities

Common Patterns

Component Padding

Stack Spacing

Inline Spacing

Section Margins

Responsive Spacing

Resources

Tailwind Spacing

​Spacing Scale

​Gap Utilities

​Common Patterns

Component Padding

Stack Spacing

Inline Spacing

Section Margins

​Responsive Spacing

​Resources

Tailwind Spacing

Spacing Scale

Gap Utilities

Common Patterns

Responsive Spacing

Resources