Space Between

Utilities for controlling the space between child elements.

Default class reference

Add horizontal space between children

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

<div class="flex space-x-4 ...">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Add vertical space between children

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

<div class="space-y-6 ...">
  <div>1</div>
  <div>2</div>
  <div>3</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>1</div>
  <div>2</div>
  <div>3</div>
</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.

Responsive

To control the space between elements at a specific breakpoint, add a {screen}: prefix to any existing space utility. For example, adding the class md:space-x-8 to an element would apply the space-x-8 utility at medium screen sizes and above.

<div class="flex space-x-2 md:space-x-8">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

For more information about Tailwind’s responsive design features, check out the Responsive Design documentation.

Customizing

Spacing scale

If you’d like to customize your values for space between, padding, margin, width, and height all at once, use the theme.spacing section of your tailwind.config.js file.

  // tailwind.config.js
  module.exports = {
    theme: {
      spacing: {
+       sm: '8px',
+       md: '16px',
+       lg: '24px',
+       xl: '48px',
      }
    }
  }

To customize only the space between values, use the theme.space section of your tailwind.config.js file.

  // tailwind.config.js
  module.exports = {
    theme: {
      space: {
+       sm: '8px',
+       md: '16px',
+       lg: '24px',
+       xl: '48px',
      }
    }
  }

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

Variants

By default, only responsive variants are generated for space utilities.

You can control which variants are generated for the space utilities by modifying the space property in the variants section of your tailwind.config.js file.

For example, this config will also generate hover and focus variants:

  // tailwind.config.js
  module.exports = {
    variants: {
      extend: {
        // ...
+       space: ['hover', 'focus'],
      }
    }
  }

Disabling

If you don’t plan to use the space utilities in your project, you can disable them entirely by setting the space property to false in the corePlugins section of your config file:

  // tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
+     space: false,
    }
  }

←Margin Width→

Edit this page on GitHub