Divide Width

    Utilities for controlling the border width between elements.

    Show all classes

    Add borders between horizontal elements using the utilities.

    Add borders between stacked children

    Add borders between stacked elements using the divide-y-{width} utilities.

    1.   <div>01</div>
    2.   <div>02</div>
    3.   <div>03</div>
    4. </div>

    If your elements are in reverse order (using say flex-row-reverse or flex-col-reverse), use the divide-x-reverse or divide-y-reverse utilities to ensure the border is added to the correct side of each element.

    Divide Width - 图3

    Hover, focus, and other states

    Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover:divide-y-8 to only apply the divide-y-8 utility on hover.

    2.   <!-- ... -->
    3. </div>

    For a complete list of all available state modifiers, check out the 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:divide-y-8 to apply the divide-y-8 utility at only medium screen sizes and above.

    Customizing your theme

    The divide width scale inherits its values from the borderWidth scale by default, so if you’d like to customize your values for both border width and divide width together, use the theme.borderWidth section of your tailwind.config.js file.

    tailwind.config.js

    1. module.exports = {
    2.   theme: {
    3.     borderWidth: {
    4.       DEFAULT: '1px',
    6.       '3': '3px',
    7.       '4': '4px',
    8.       '6': '6px',
    9.       '8': '8px',
    10.     }
    11.   }
    12. }

    To customize only the divide width values, use the theme.divideWidth section of your tailwind.config.js file.

    tailwind.config.js

    Learn more about customizing the default theme in the documentation.

    1. <div class="divide-x-[3px]">
    2.   <!-- ... -->

    Learn more about arbitrary value support in the documentation.