Divide width
Utilities for controlling the border width between elements
Class reference
Add borders between horizontal children
Add borders between horizontal elements using the divide-x-{amount}
utilities.
Add borders between stacked children
Add borders between stacked elements using the divide-y-{amount}
utilities.
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.
Responsive
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-y-8
to an element would apply the divide-y-8
utility at medium screen sizes and above.
<div class="divide-y divide-gray-400 **md:divide-y-8**">
<div class="py-2">1</div>
<div class="py-2">2</div>
<div class="py-2">3</div>
</div>
For more information about Elements’ responsive design features, check out the Responsive Design documentation.
On this Page
v1.13.5