Divide opacity

Utilities for controlling the opacity borders between elements


Class reference

ClassProperties
divide-opacity-0--divide-opacity: 0
divide-opacity-5--divide-opacity: 0.05
divide-opacity-10--divide-opacity: 0.1
divide-opacity-15--divide-opacity: 0.15
divide-opacity-20--divide-opacity: 0.2
divide-opacity-25--divide-opacity: 0.25
divide-opacity-30--divide-opacity: 0.3
divide-opacity-35--divide-opacity: 0.35
divide-opacity-40--divide-opacity: 0.4
divide-opacity-45--divide-opacity: 0.45
divide-opacity-50--divide-opacity: 0.5
divide-opacity-55--divide-opacity: 0.55
divide-opacity-60--divide-opacity: 0.6
divide-opacity-65--divide-opacity: 0.65
divide-opacity-70--divide-opacity: 0.7
divide-opacity-75--divide-opacity: 0.75
divide-opacity-80--divide-opacity: 0.8
divide-opacity-85--divide-opacity: 0.85
divide-opacity-90--divide-opacity: 0.9
divide-opacity-95--divide-opacity: 0.95
divide-opacity-100--divide-opacity: 1

# Usage

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

1
2
3
<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.