Space Between

Basic usage

Add horizontal space between children

Control the horizontal space between elements using the space-x-{amount} utilities.

<div className="flex **space-x-4** ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

Add vertical space between children

Control the vertical space between elements using the space-y-{amount} utilities.

<div className="flex flex-col **space-y-4** ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

Reversing children order

If your elements are in reverse order (using say flex-row-reverse or flex-col-reverse), use the space-x-reverse or space-y-reverse utilities to ensure the space is added to the correct side of each element.

<div className="flex flex-row-reverse **space-x-4 space-x-reverse** ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

Using negative values

To use a negative space value, prefix the className name with a dash to convert it to a negative value.

<div className="flex **-space-x-4** ...">
  <!-- ... -->
</div>