Spacing

Generic spacing utilities that can be mapped to a concrete Tailwind class by each theme.

Samples

Vertical Spacing

Item
Item
Item
Item
View Source 
<div class="space-y">
  <div class="button block">Item</div>
  <div class="button block">Item</div>
  <div class="button block">Item</div>
  <div class="button block">Item</div>
</div>

Horizontal Spacing

Item
Item
Item
Item
View Source 
<div class="flex space-x">
  <div class="flex-1 button">Item</div>
  <div class="flex-1 button">Item</div>
  <div class="flex-1 button">Item</div>
  <div class="flex-1 button">Item</div>
</div>

Vertical Gaps

Item
Item
Item
Item
View Source 
<div class="grid gap-y">
  <div class="button block">Item</div>
  <div class="button block">Item</div>
  <div class="button block">Item</div>
  <div class="button block">Item</div>
</div>

Horizontal Gaps

Item
Item
Item
Item
View Source 
<div class="flex gap-x">
  <div class="flex-1 button">Item</div>
  <div class="flex-1 button">Item</div>
  <div class="flex-1 button">Item</div>
  <div class="flex-1 button">Item</div>
</div>