Space Between

    Utilities for controlling the space between child elements.

    Show all classes

    Control the horizontal space between elements using the utilities.

    Add vertical space between children

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

    Space Between - 图2

    1. <div class="flex flex-col space-y-4 ...">
    2.   <div>01</div>
    3.   <div>03</div>
    4. </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.

    1. <div class="flex flex-row-reverse space-x-4 space-x-reverse ...">
    2.   <div>01</div>
    3.   <div>02</div>
    4.   <div>03</div>
    5. </div>

    To use a negative space value, prefix the class name with a dash to convert it to a negative value.

    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 when possible, or add margin to every element with a matching negative margin on the parent:

    1. <div class="flow-root">
    2.   <div class="-m-2 flex flex-wrap">
    4.     <div class="m-2 ..."></div>
    5.     <div class="m-2 ..."></div>
    6.   </div>
    7. </div>

    Cannot be paired with divide utilities

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

    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.

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

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

    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.

    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

    1. module.exports = {
    2.   theme: {
    4.       spacing: {
    5.         '5px': '5px',
    6.       }
    7.     }
    8.   }
    9. }

    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

    1. module.exports = {
    2.   theme: {
    3.     extend: {
    4.       space: {
    5.         '5px': '5px',
    6.       }
    7.     }

    Learn more about customizing the default theme in the 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.

    Learn more about arbitrary value support in the documentation.