Divide color

Class reference

# Usage

Control the border color between elements using the divide-{color} utilities.

<div class="divide-y divide-red">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

# Changing opacity

Control the opacity of borders between elements using the .divide-opacity-{amount} utilities.

<div class="divide-y-4 divide-dark divide-opacity-25">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Learn more in the divide opacity documentation.

# 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-x-8 to an element would apply the divide-x-8 utility at medium screen sizes and above.

<div class="divide-y divide-teal-400 md:divide-pink-400">
  <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.