Ring opacity

Utilities for setting the opacity of outline rings.

Class reference

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

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

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

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