Divide width

Class reference

# Add borders between horizontal children

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

<div class="grid grid-cols-3 divide-x divide-green-400">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

# Add borders between stacked children

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

<div class="grid grid-cols-1 divide-y divide-orange-400">
  <div>1</div>
  <div>2</div>
  <div>3</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 class="flex flex-col-reverse divide-y divide-y-reverse divide-pink-400">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

# 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.