Divide opacity

Class reference

# Usage

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

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

# Responsive

To control the opacity of borders between elements at a specific breakpoint, add a {screen}: prefix to any existing divide opacity utility. For example, use md:divide-opacity-50 to apply the divide-opacity-50 utility at only medium screen sizes and above.

<div class="divide-y-2 divide-blue-500 divide-opacity-75 md:divide-opacity-50">
  <!-- ... -->
</div>

For more information about Elements’ responsive design features, check out the Responsive Design documentation.