Ring opacity

Class reference

# Usage

Use the ring-opacity-{amount} utilities to set the opacity of an outline ring.

<button class="... ring-4 ring-red-400 ring-opacity-25">
  Button
</button>

# Responsive

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

<button class="ring-2 ring-blue ring-opacity-75 md:ring-opacity-50">
  <!-- ... -->
</button>

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