Add horizontal space between children

Add vertical space between children

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

1

2

3

<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.

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.

1

2

3

1

2

3

1

2

3

1

2

3

1

2

3

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.