Ring color

Utilities for setting the color of outline rings.


Class reference

ClassProperties
ring-current--tw-ring-color: currentColor;
 
ring-transparent--tw-ring-color: transparent;
 
ring-black--tw-ring-color: rgba(0, 0, 0, var(--tw-ring-opacity));
 
ring-white--tw-ring-color: rgba(255, 255, 255, var(--tw-ring-opacity));
 
ring-gray-0--tw-ring-color: rgba(253, 248, 255, var(--tw-ring-opacity));
 
ring-gray-100--tw-ring-color: rgba(248, 246, 249, var(--tw-ring-opacity));
 
ring-gray-200--tw-ring-color: rgba(233, 231, 234, var(--tw-ring-opacity));
 
ring-gray-300--tw-ring-color: rgba(207, 203, 206, var(--tw-ring-opacity));
 
ring-gray-400--tw-ring-color: rgba(168, 163, 167, var(--tw-ring-opacity));
 
ring-gray-500--tw-ring-color: rgba(123, 116, 121, var(--tw-ring-opacity));
 
ring-gray-600--tw-ring-color: rgba(81, 75, 79, var(--tw-ring-opacity));
 
ring-gray-700--tw-ring-color: rgba(52, 46, 50, var(--tw-ring-opacity));
 
ring-gray-800--tw-ring-color: rgba(35, 30, 33, var(--tw-ring-opacity));
 
ring-gray-900--tw-ring-color: rgba(26, 18, 23, var(--tw-ring-opacity));
 
ring-gray--tw-ring-color: rgba(233, 231, 234, var(--tw-ring-opacity));
 
ring-violet-0--tw-ring-color: rgba(246, 243, 255, var(--tw-ring-opacity));
 
ring-violet-100--tw-ring-color: rgba(239, 228, 255, var(--tw-ring-opacity));
 
ring-violet-200--tw-ring-color: rgba(220, 196, 255, var(--tw-ring-opacity));
 
ring-violet-300--tw-ring-color: rgba(189, 144, 255, var(--tw-ring-opacity));
 
ring-violet-400--tw-ring-color: rgba(148, 78, 250, var(--tw-ring-opacity));
 
ring-violet-500--tw-ring-color: rgba(104, 12, 233, var(--tw-ring-opacity));
 
ring-violet-600--tw-ring-color: rgba(89, 0, 190, var(--tw-ring-opacity));
 
ring-violet-700--tw-ring-color: rgba(73, 0, 143, var(--tw-ring-opacity));
 
ring-violet-800--tw-ring-color: rgba(53, 0, 97, var(--tw-ring-opacity));
 
ring-violet-900--tw-ring-color: rgba(30, 0, 51, var(--tw-ring-opacity));
 
ring-violet--tw-ring-color: rgba(104, 12, 233, var(--tw-ring-opacity));
 
ring-magenta-0--tw-ring-color: rgba(251, 243, 255, var(--tw-ring-opacity));
 
ring-magenta-100--tw-ring-color: rgba(247, 221, 255, var(--tw-ring-opacity));
 
ring-magenta-200--tw-ring-color: rgba(239, 184, 253, var(--tw-ring-opacity));
 
ring-magenta-300--tw-ring-color: rgba(229, 131, 247, var(--tw-ring-opacity));
 
ring-magenta-400--tw-ring-color: rgba(213, 67, 237, var(--tw-ring-opacity));
 
ring-magenta-500--tw-ring-color: rgba(191, 4, 220, var(--tw-ring-opacity));
 
ring-magenta-600--tw-ring-color: rgba(180, 0, 186, var(--tw-ring-opacity));
 
ring-magenta-700--tw-ring-color: rgba(146, 0, 138, var(--tw-ring-opacity));
 
ring-magenta-800--tw-ring-color: rgba(99, 0, 86, var(--tw-ring-opacity));
 
ring-magenta-900--tw-ring-color: rgba(51, 0, 41, var(--tw-ring-opacity));
 
ring-magenta--tw-ring-color: rgba(191, 4, 220, var(--tw-ring-opacity));
 
ring-blue-0--tw-ring-color: rgba(244, 253, 255, var(--tw-ring-opacity));
 
ring-blue-100--tw-ring-color: rgba(194, 235, 253, var(--tw-ring-opacity));
 
ring-blue-200--tw-ring-color: rgba(144, 201, 247, var(--tw-ring-opacity));
 
ring-blue-300--tw-ring-color: rgba(100, 160, 235, var(--tw-ring-opacity));
 
ring-blue-400--tw-ring-color: rgba(65, 119, 216, var(--tw-ring-opacity));
 
ring-blue-500--tw-ring-color: rgba(39, 83, 191, var(--tw-ring-opacity));
 
ring-blue-600--tw-ring-color: rgba(22, 55, 161, var(--tw-ring-opacity));
 
ring-blue-700--tw-ring-color: rgba(11, 35, 129, var(--tw-ring-opacity));
 
ring-blue-800--tw-ring-color: rgba(5, 21, 96, var(--tw-ring-opacity));
 
ring-blue-900--tw-ring-color: rgba(2, 13, 64, var(--tw-ring-opacity));
 
ring-blue--tw-ring-color: rgba(100, 160, 235, var(--tw-ring-opacity));
 
ring-teal-0--tw-ring-color: rgba(244, 255, 252, var(--tw-ring-opacity));
 
ring-teal-100--tw-ring-color: rgba(190, 248, 236, var(--tw-ring-opacity));
 
ring-teal-200--tw-ring-color: rgba(135, 232, 220, var(--tw-ring-opacity));
 
ring-teal-300--tw-ring-color: rgba(87, 205, 200, var(--tw-ring-opacity));
 
ring-teal-400--tw-ring-color: rgba(50, 164, 168, var(--tw-ring-opacity));
 
ring-teal-500--tw-ring-color: rgba(26, 119, 127, var(--tw-ring-opacity));
 
ring-teal-600--tw-ring-color: rgba(12, 81, 90, var(--tw-ring-opacity));
 
ring-teal-700--tw-ring-color: rgba(5, 54, 62, var(--tw-ring-opacity));
 
ring-teal-800--tw-ring-color: rgba(2, 39, 45, var(--tw-ring-opacity));
 
ring-teal-900--tw-ring-color: rgba(1, 32, 38, var(--tw-ring-opacity));
 
ring-teal--tw-ring-color: rgba(87, 205, 200, var(--tw-ring-opacity));
 
ring-green-0--tw-ring-color: rgba(246, 255, 244, var(--tw-ring-opacity));
 
ring-green-100--tw-ring-color: rgba(192, 248, 190, var(--tw-ring-opacity));
 
ring-green-200--tw-ring-color: rgba(135, 232, 145, var(--tw-ring-opacity));
 
ring-green-300--tw-ring-color: rgba(87, 205, 113, var(--tw-ring-opacity));
 
ring-green-400--tw-ring-color: rgba(50, 168, 87, var(--tw-ring-opacity));
 
ring-green-500--tw-ring-color: rgba(26, 127, 64, var(--tw-ring-opacity));
 
ring-green-600--tw-ring-color: rgba(12, 90, 45, var(--tw-ring-opacity));
 
ring-green-700--tw-ring-color: rgba(5, 62, 32, var(--tw-ring-opacity));
 
ring-green-800--tw-ring-color: rgba(2, 45, 23, var(--tw-ring-opacity));
 
ring-green-900--tw-ring-color: rgba(1, 38, 20, var(--tw-ring-opacity));
 
ring-green--tw-ring-color: rgba(87, 205, 113, var(--tw-ring-opacity));
 
ring-yellow-0--tw-ring-color: rgba(255, 252, 244, var(--tw-ring-opacity));
 
ring-yellow-100--tw-ring-color: rgba(249, 240, 191, var(--tw-ring-opacity));
 
ring-yellow-200--tw-ring-color: rgba(234, 227, 136, var(--tw-ring-opacity));
 
ring-yellow-300--tw-ring-color: rgba(206, 207, 88, var(--tw-ring-opacity));
 
ring-yellow-400--tw-ring-color: rgba(162, 169, 51, var(--tw-ring-opacity));
 
ring-yellow-500--tw-ring-color: rgba(114, 125, 25, var(--tw-ring-opacity));
 
ring-yellow-600--tw-ring-color: rgba(74, 85, 11, var(--tw-ring-opacity));
 
ring-yellow-700--tw-ring-color: rgba(48, 56, 5, var(--tw-ring-opacity));
 
ring-yellow-800--tw-ring-color: rgba(33, 39, 2, var(--tw-ring-opacity));
 
ring-yellow-900--tw-ring-color: rgba(27, 33, 1, var(--tw-ring-opacity));
 
ring-yellow--tw-ring-color: rgba(206, 207, 88, var(--tw-ring-opacity));
 
ring-orange-0--tw-ring-color: rgba(255, 247, 244, var(--tw-ring-opacity));
 
ring-orange-100--tw-ring-color: rgba(253, 208, 188, var(--tw-ring-opacity));
 
ring-orange-200--tw-ring-color: rgba(246, 171, 133, var(--tw-ring-opacity));
 
ring-orange-300--tw-ring-color: rgba(233, 140, 85, var(--tw-ring-opacity));
 
ring-orange-400--tw-ring-color: rgba(214, 114, 47, var(--tw-ring-opacity));
 
ring-orange-500--tw-ring-color: rgba(187, 91, 22, var(--tw-ring-opacity));
 
ring-orange-600--tw-ring-color: rgba(155, 70, 6, var(--tw-ring-opacity));
 
ring-orange-700--tw-ring-color: rgba(121, 53, 0, var(--tw-ring-opacity));
 
ring-orange-800--tw-ring-color: rgba(85, 38, 0, var(--tw-ring-opacity));
 
ring-orange-900--tw-ring-color: rgba(51, 23, 0, var(--tw-ring-opacity));
 
ring-orange--tw-ring-color: rgba(233, 140, 85, var(--tw-ring-opacity));
 
ring-red-0--tw-ring-color: rgba(255, 244, 244, var(--tw-ring-opacity));
 
ring-red-100--tw-ring-color: rgba(253, 194, 196, var(--tw-ring-opacity));
 
ring-red-200--tw-ring-color: rgba(247, 144, 146, var(--tw-ring-opacity));
 
ring-red-300--tw-ring-color: rgba(235, 100, 103, var(--tw-ring-opacity));
 
ring-red-400--tw-ring-color: rgba(216, 65, 68, var(--tw-ring-opacity));
 
ring-red-500--tw-ring-color: rgba(191, 39, 42, var(--tw-ring-opacity));
 
ring-red-600--tw-ring-color: rgba(161, 22, 24, var(--tw-ring-opacity));
 
ring-red-700--tw-ring-color: rgba(129, 11, 13, var(--tw-ring-opacity));
 
ring-red-800--tw-ring-color: rgba(96, 5, 7, var(--tw-ring-opacity));
 
ring-red-900--tw-ring-color: rgba(64, 2, 3, var(--tw-ring-opacity));
 
ring-red--tw-ring-color: rgba(235, 100, 103, var(--tw-ring-opacity));
 
ring-pink-0--tw-ring-color: rgba(255, 244, 255, var(--tw-ring-opacity));
 
ring-pink-100--tw-ring-color: rgba(253, 194, 245, var(--tw-ring-opacity));
 
ring-pink-200--tw-ring-color: rgba(247, 144, 219, var(--tw-ring-opacity));
 
ring-pink-300--tw-ring-color: rgba(235, 100, 182, var(--tw-ring-opacity));
 
ring-pink-400--tw-ring-color: rgba(216, 65, 144, var(--tw-ring-opacity));
 
ring-pink-500--tw-ring-color: rgba(191, 39, 108, var(--tw-ring-opacity));
 
ring-pink-600--tw-ring-color: rgba(161, 22, 78, var(--tw-ring-opacity));
 
ring-pink-700--tw-ring-color: rgba(129, 11, 54, var(--tw-ring-opacity));
 
ring-pink-800--tw-ring-color: rgba(96, 5, 37, var(--tw-ring-opacity));
 
ring-pink-900--tw-ring-color: rgba(64, 2, 23, var(--tw-ring-opacity));
 
ring-pink--tw-ring-color: rgba(235, 100, 182, var(--tw-ring-opacity));
 
ring-light--tw-ring-color: rgba(253, 248, 255, var(--tw-ring-opacity));
 
ring-dark--tw-ring-color: rgba(52, 46, 50, var(--tw-ring-opacity));
 
ring-primary--tw-ring-color: rgba(104, 12, 233, var(--tw-ring-opacity));
 
ring-primary-light--tw-ring-color: rgba(148, 78, 250, var(--tw-ring-opacity));
 
ring-primary-dark--tw-ring-color: rgba(89, 0, 190, var(--tw-ring-opacity));
 
ring-secondary--tw-ring-color: rgba(30, 0, 51, var(--tw-ring-opacity));
 
ring-secondary-light--tw-ring-color: rgba(73, 0, 143, var(--tw-ring-opacity));
 
ring-secondary-dark--tw-ring-color: rgba(53, 0, 97, var(--tw-ring-opacity));
 
ring-info--tw-ring-color: rgba(100, 160, 235, var(--tw-ring-opacity));
 
ring-info-light--tw-ring-color: rgba(144, 201, 247, var(--tw-ring-opacity));
 
ring-info-dark--tw-ring-color: rgba(65, 119, 216, var(--tw-ring-opacity));
 
ring-success--tw-ring-color: rgba(87, 205, 113, var(--tw-ring-opacity));
 
ring-success-light--tw-ring-color: rgba(135, 232, 145, var(--tw-ring-opacity));
 
ring-success-dark--tw-ring-color: rgba(50, 168, 87, var(--tw-ring-opacity));
 
ring-warning--tw-ring-color: rgba(206, 207, 88, var(--tw-ring-opacity));
 
ring-warning-light--tw-ring-color: rgba(234, 227, 136, var(--tw-ring-opacity));
 
ring-warning-dark--tw-ring-color: rgba(162, 169, 51, var(--tw-ring-opacity));
 
ring-danger--tw-ring-color: rgba(235, 100, 103, var(--tw-ring-opacity));
 
ring-danger-light--tw-ring-color: rgba(247, 144, 146, var(--tw-ring-opacity));
 
ring-danger-dark--tw-ring-color: rgba(216, 65, 68, var(--tw-ring-opacity));
 
ring-brand-primary--tw-ring-color: rgba(104, 12, 233, var(--tw-ring-opacity));
 
ring-brand-accent--tw-ring-color: rgba(191, 4, 220, var(--tw-ring-opacity));
 
ring-brand-secondary--tw-ring-color: rgba(30, 0, 51, var(--tw-ring-opacity));
 
ring-brand-dark--tw-ring-color: rgba(37, 13, 46, var(--tw-ring-opacity));
 

# Usage

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

<button class="... ring-4 ring-teal-100">
Button
</button>

# Changing opacity

You can control the opacity of rings using the ring-opacity-{amount} utilities:

<button class="... ring-4 ring-yellow-500 ring-opacity-25 bg-yellow-0">
Button
</button>

For more information, see the Ring Opacity documentation.


# Responsive

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

<button class="ring-2 ring-blue md:ring-blue-500">
<!-- ... -->
</button>

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