Divide Width

Basic usage

Add borders between horizontal children

Add borders between horizontal elements using the divide-x-{width} utilities.

<div className="grid grid-cols-3 **divide-x**">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

Add borders between stacked children

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

<div className="grid grid-cols-1 **divide-y**">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</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.

<div className="flex **flex-col-reverse divide-y divide-y-reverse**">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>