Divide Width

    v1.3.0+

    Utilities for controlling the border width between elements.

    Add borders between horizontal children

    Add borders between horizontal elements using the utilities.

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

    Divide Width - 图2

    1. <div class="divide-y divide-gray-400">
    2.   <div class="text-center py-2">1</div>
    3.   <div class="text-center py-2">2</div>
    4. </div>

    Reversing children order

    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.

    To control the borders between elements at a specific breakpoint, add a {screen}: prefix to any existing divide utility. For example, adding the class md:divide-x-8 to an element would apply the divide-x-8 utility at medium screen sizes and above.

    Divide Width - 图4

    all

    sm

    Divide Width - 图6

    md

    lg

    Divide Width - 图8

    1. <div class="divide-y sm:divide-y-2 md:divide-y-4 lg:divide-y-8 xl:divide-y-0 divide-gray-400">
    2.   <div class="text-center py-2">1</div>
    3.   <div class="text-center py-2">2</div>
    5. </div>

    1

    2

    3

    Customizing

    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.

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

    1.   // tailwind.config.js
    2.   module.exports = {
    3.     theme: {
    4.       divideWidth: {
    5.         default: '1px',
    6.         '0': '0',
    7. +       '3': '3px',
    8.         '4': '4px',
    9. +       '6': '6px',
    11.       }
    12.     }
    13.   }

    Learn more about customizing the default theme in the .

    By default, only responsive variants are generated for divide width utilities.

    You can control which variants are generated for the divide width utilities by modifying the divideWidth property in the variants section of your tailwind.config.js file.

    For example, this config will also generate hover and focus variants:

    1.   // tailwind.config.js
    2.   module.exports = {
    3.     corePlugins: {
    4.       // ...
    5. +     divideWidth: false,
    6.   }

    ← Border Style