Spacing

Space Between

Utilities for controlling the space between child elements.

Quick reference

Show all classes

Basic usage

Add horizontal space between children

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

<div class="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 class="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 class="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 class name with a dash to convert it to a negative value.

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

Limitations

These utilities are really just a shortcut for adding margin to all-but-the-first-item in a group, and aren’t designed to handle complex cases like grids, layouts that wrap, or situations where the children are rendered in a complex custom order rather than their natural DOM order.

For those situations, it’s better to use the gap utilities when possible, or add margin to every element with a matching negative margin on the parent:

<div class="flow-root">
  <div class="-m-2 flex flex-wrap">
    <div class="m-2 ..."></div>
    <div class="m-2 ..."></div>
    <div class="m-2 ..."></div>
  </div>
</div>

Cannot be paired with divide utilities

The space-* utilities are not designed to work together with the divide utilities. For those situations, consider adding margin/padding utilities to the children instead.

Applying conditionally

Hover, focus, and other states

Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover:space-x-8 to only apply the space-x-8 utility on hover.

<div class="flex space-x-2 hover:space-x-8">
  <!-- ... -->
</div>

For a complete list of all available state modifiers, check out the Hover, Focus, & Other States documentation.

Breakpoints and media queries

You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:space-x-8 to apply the space-x-8 utility at only medium screen sizes and above.

<div class="flex space-x-2 md:space-x-8">
  <!-- ... -->
</div>

To learn more, check out the documentation on Responsive Design, Dark Mode and other media query modifiers.

Using custom values

Customizing your theme

By default, Tailwind’s space scale uses the default spacing scale. You can customize your spacing scale by editing theme.spacing or theme.extend.spacing in your tailwind.config.js file.

tailwind.config.js

module.exports = {
  theme: {
    extend: {
      spacing: {
        '5px': '5px',
      }
    }
  }
}

Alternatively, you can customize just the space scale by editing theme.space or theme.extend.space in your tailwind.config.js file.

tailwind.config.js

module.exports = {
  theme: {
    extend: {
      space: {
        '5px': '5px',
      }
    }
  }
}

Learn more about customizing the default theme in the theme customization documentation.

Arbitrary values

If you need to use a one-off space-{x|y} value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.

<div class="space-y-[5px]">
  <!-- ... -->
</div>

Learn more about arbitrary value support in the arbitrary values documentation.