Space Between

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>

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.

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

<div class="flex space-x-2 sm:space-x-4 md:space-x-6 lg:space-x-8 xl:space-x-12">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

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.

Responsive and pseudo-class 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: {
      // ...
-     space: ['responsive'],
+     space: ['responsive', '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,
    }
  }