Space Between

v1.3.0+

Utilities for controlling the space between child elements.

Add horizontal space between children

Control the horizontal space between elements using the utilities.

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

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

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.

all

sm

md

lg

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

1

2

3

Customizing

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.

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: {
+       md: '16px',
+       lg: '24px',
      }
    }
  }

Learn more about customizing the default theme in the .

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 = {
    corePlugins: {
      // ...
+     space: false,
  }

← Margin