Spacing

Empathy DS uses Tailwind CSS's spacing scale for consistent layout and component spacing.

Spacing Scale

The spacing scale is based on a 4px (0.25rem) unit:

Class	Value	Pixels	Usage
0	0	0px	No spacing
px	1px	1px	Hairline borders
0.5	0.125rem	2px	Micro spacing
1	0.25rem	4px	Tight spacing
1.5	0.375rem	6px	-
2	0.5rem	8px	Small gaps
2.5	0.625rem	10px	-
3	0.75rem	12px	-
4	1rem	16px	Standard spacing
5	1.25rem	20px	-
6	1.5rem	24px	Medium spacing
8	2rem	32px	Large spacing
10	2.5rem	40px	-
12	3rem	48px	Section spacing
16	4rem	64px	Large sections
20	5rem	80px	-
24	6rem	96px	Extra large

Common Patterns

Component Padding

Component	Padding	Example
Button (sm)	px-3 py-1.5	Small button
Button (default)	px-4 py-2	Default button
Button (lg)	px-6 py-3	Large button
Card	p-6	Card content
Dialog	p-6	Dialog content
Input	px-3 py-2	Input field

Gaps Between Elements

Gap	Usage
gap-1 (4px)	Icon + text in buttons
gap-2 (8px)	Inline form elements
gap-4 (16px)	Form field groups
gap-6 (24px)	Card sections
gap-8 (32px)	Page sections

Usage Examples

Form Layout

<template>
  <form class="space-y-4">
    <div class="space-y-2">
      <Label>Email</Label>
      <Input type="email" />
    </div>
    
    <div class="space-y-2">
      <Label>Password</Label>
      <Input type="password" />
    </div>
    
    <Button class="w-full">Sign In</Button>
  </form>
</template>

Card Layout

<template>
  <Card>
    <CardHeader class="space-y-1.5">
      <CardTitle>Card Title</CardTitle>
      <CardDescription>Supporting text</CardDescription>
    </CardHeader>
    <CardContent class="space-y-4">
      <p>Content goes here...</p>
    </CardContent>
    <CardFooter class="gap-2">
      <Button variant="outline">Cancel</Button>
      <Button>Save</Button>
    </CardFooter>
  </Card>
</template>

Flex with Gap

<template>
  <!-- Horizontal items with gap -->
  <div class="flex items-center gap-2">
    <Avatar />
    <span>Username</span>
  </div>
  
  <!-- Button group -->
  <div class="flex gap-2">
    <Button variant="outline">Cancel</Button>
    <Button>Confirm</Button>
  </div>
</template>

Grid Layout

<template>
  <!-- Dashboard grid -->
  <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
    <Card>...</Card>
    <Card>...</Card>
    <Card>...</Card>
  </div>
</template>

Spacing Utilities

Margin

<template>
  <div class="mt-4">Top margin</div>
  <div class="mb-4">Bottom margin</div>
  <div class="mx-4">Horizontal margin</div>
  <div class="my-4">Vertical margin</div>
  <div class="m-4">All sides margin</div>
</template>

Padding

<template>
  <div class="pt-4">Top padding</div>
  <div class="pb-4">Bottom padding</div>
  <div class="px-4">Horizontal padding</div>
  <div class="py-4">Vertical padding</div>
  <div class="p-4">All sides padding</div>
</template>

Space Between (Stack)

<template>
  <!-- Vertical stack with consistent spacing -->
  <div class="space-y-4">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
  </div>
  
  <!-- Horizontal with spacing -->
  <div class="flex space-x-2">
    <Button>One</Button>
    <Button>Two</Button>
  </div>
</template>

Best Practices

1. Use gap over margins for flex/grid layouts

2. Use space-y/x for stacks of elements

3. Use consistent scale values - prefer 2, 4, 6, 8 over arbitrary values

4. Match padding to component size:

   • Small components: 2-3 (8-12px)
   • Medium components: 4-6 (16-24px)
   • Large sections: 8-12 (32-48px)

5. Use responsive spacing when needed:

   <div class="p-4 md:p-6 lg:p-8">
     Responsive padding
   </div>