Tailwind CSS - Ring Color

Tailwind CSS: Styling with Ring Color

Tailwind’s ring-color utilities provide a powerful way to add outlines to elements. Unlike borders, rings are drawn outside the element’s box, so they don’t affect its layout. They are especially useful for creating accessible focus indicators.

Ring Color Utility Classes

You can set the ring color using the ring-{color} classes, which draw from Tailwind’s extensive, fully customizable color palette. A ring is only visible when a ring width is also applied (e.g., ring-2).

| Class | CSS Properties | | ring-inherit | —tw-ring-color: inherit; | | ring-current | —tw-ring-color: currentColor; | | ring-transparent | —tw-ring-color: transparent; | | ring-black | —tw-ring-color: rgb(0, 0, 0); | | ring-white | —tw-ring-color: rgb(255, 255, 255); | | ring-slate-50 | —tw-ring-color: rgb(248, 250, 252); | | ring-slate-100 | —tw-ring-color: rgb(241, 245, 249); | | ring-slate-200 | —tw-ring-color: rgb(226, 232, 240); | | ring-slate-300 | —tw-ring-color: rgb(203, 213, 225); | | ring-slate-400 | —tw-ring-color: rgb(148, 163, 184); | | ring-slate-500 | —tw-ring-color: rgb(100, 116, 139); | | ring-slate-600 | —tw-ring-color: rgb(71, 85, 105); | | ring-slate-700 | —tw-ring-color: rgb(51, 65, 85); | | ring-slate-800 | —tw-ring-color: rgb(30, 41, 59); | | ring-slate-900 | —tw-ring-color: rgb(15, 23, 42); | | ring-slate-950 | —tw-ring-color: rgb(2, 6, 23); | | ring-gray-50 | —tw-ring-color: rgb(249, 250, 251); | | ring-gray-100 | —tw-ring-color: rgb(243, 244, 246); | | ring-gray-200 | —tw-ring-color: rgb(229, 231, 235); | | ring-gray-300 | —tw-ring-color: rgb(209, 213, 219); | | ring-gray-400 | —tw-ring-color: rgb(156, 163, 175); | | ring-gray-500 | —tw-ring-color: rgb(107, 114, 128); | | ring-gray-600 | —tw-ring-color: rgb(75, 85, 99); | | ring-gray-700 | —tw-ring-color: rgb(55, 65, 81); | | ring-gray-800 | —tw-ring-color: rgb(31, 41, 55); | | ring-gray-900 | —tw-ring-color: rgb(17, 24, 39); | | ring-gray-950 | —tw-ring-color: rgb(3, 7, 18); | | ring-zinc-50 | —tw-ring-color: rgb(250, 250, 250); | | ring-zinc-100 | —tw-ring-color: rgb(244, 244, 245); | | ring-zinc-200 | —tw-ring-color: rgb(228, 228, 231); | | ring-zinc-300 | —tw-ring-color: rgb(212, 212, 216); | | ring-zinc-400 | —tw-ring-color: rgb(161, 161, 170); | | ring-zinc-500 | —tw-ring-color: rgb(113, 113, 122); | | ring-zinc-600 | —tw-ring-color: rgb(82, 82, 91); | | ring-zinc-700 | —tw-ring-color: rgb(63, 63, 70); | | ring-zinc-800 | —tw-ring-color: rgb(39, 39, 42); | | ring-zinc-900 | —tw-ring-color: rgb(24, 24, 27); | | ring-zinc-950 | —tw-ring-color: rgb(9, 9, 11); | | ring-neutral-50 | —tw-ring-color: rgb(250, 250, 250); | | ring-neutral-100 | —tw-ring-color: rgb(245, 245, 245); | | ring-neutral-200 | —tw-ring-color: rgb(229, 229, 229); | | ring-neutral-300 | —tw-ring-color: rgb(212, 212, 212); | | ring-neutral-400 | —tw-ring-color: rgb(163, 163, 163); | | ring-neutral-500 | —tw-ring-color: rgb(115, 115, 115); | | ring-neutral-600 | —tw-ring-color: rgb(82, 82, 82); | | ring-neutral-700 | —tw-ring-color: rgb(64, 64, 64); | | ring-neutral-800 | —tw-ring-color: rgb(38, 38, 38); | | ring-neutral-900 | —tw-ring-color: rgb(23, 23, 23); | | ring-neutral-950 | —tw-ring-color: rgb(10, 10, 10); | | ring-stone-50 | —tw-ring-color: rgb(250, 250, 249); | | ring-stone-100 | —tw-ring-color: rgb(245, 245, 244); | | ring-stone-200 | —tw-ring-color: rgb(231, 229, 228); | | ring-stone-300 | —tw-ring-color: rgb(214, 211, 209); | | ring-stone-400 | —tw-ring-color: rgb(168, 162, 158); | | ring-stone-500 | —tw-ring-color: rgb(120, 113, 108); | | ring-stone-600 | —tw-ring-color: rgb(87, 83, 78); | | ring-stone-700 | —tw-ring-color: rgb(68, 64, 60); | | ring-stone-800 | —tw-ring-color: rgb(41, 37, 36); | | ring-stone-900 | —tw-ring-color: rgb(28, 25, 23); | | ring-stone-950 | —tw-ring-color: rgb(12, 10, 9); | | ring-red-50 | —tw-ring-color: rgb(254, 242, 242); | | ring-red-100 | —tw-ring-color: rgb(254, 226, 226); | | ring-red-200 | —tw-ring-color: rgb(254, 202, 202); | | ring-red-300 | —tw-ring-color: rgb(252, 165, 165); | | ring-red-400 | —tw-ring-color: rgb(248, 113, 113); | | ring-red-500 | —tw-ring-color: rgb(239, 68, 68); | | ring-red-600 | —tw-ring-color: rgb(220, 38, 38); | | ring-red-700 | —tw-ring-color: rgb(185, 28, 28); | | ring-red-800 | —tw-ring-color: rgb(153, 27, 27); | | ring-red-900 | —tw-ring-color: rgb(127, 29, 29); | | ring-red-950 | —tw-ring-color: rgb(69, 10, 10); | | ring-orange-50 | —tw-ring-color: rgb(255, 247, 237); | | ring-orange-100 | —tw-ring-color: rgb(255, 237, 213); | | ring-orange-200 | —tw-ring-color: rgb(254, 215, 170); | | ring-orange-300 | —tw-ring-color: rgb(253, 186, 116); | | ring-orange-400 | —tw-ring-color: rgb(251, 146, 60); | | ring-orange-500 | —tw-ring-color: rgb(249, 115, 22); | | ring-orange-600 | —tw-ring-color: rgb(234, 88, 12); | | ring-orange-700 | —tw-ring-color: rgb(194, 65, 12); | | ring-orange-800 | —tw-ring-color: rgb(154, 52, 18); | | ring-orange-900 | —tw-ring-color: rgb(124, 45, 18); | | ring-orange-950 | —tw-ring-color: rgb(67, 20, 7); | | ring-amber-50 | —tw-ring-color: rgb(255, 251, 235); | | ring-amber-100 | —tw-ring-color: rgb(254, 243, 199); | | ring-amber-200 | —tw-ring-color: rgb(253, 230, 138); | | ring-amber-300 | —tw-ring-color: rgb(252, 211, 77); | | ring-amber-400 | —tw-ring-color: rgb(251, 191, 36); | | ring-amber-500 | —tw-ring-color: rgb(245, 158, 11); | | ring-amber-600 | —tw-ring-color: rgb(217, 119, 6); | | ring-amber-700 | —tw-ring-color: rgb(180, 83, 9); | | ring-amber-800 | —tw-ring-color: rgb(146, 64, 14); | | ring-amber-900 | —tw-ring-color: rgb(120, 53, 15); | | ring-amber-950 | —tw-ring-color: rgb(69, 26, 3); | | ring-yellow-50 | —tw-ring-color: rgb(254, 252, 232); | | ring-yellow-100 | —tw-ring-color: rgb(254, 249, 195); | | ring-yellow-200 | —tw-ring-color: rgb(254, 240, 138); | | ring-yellow-300 | —tw-ring-color: rgb(253, 224, 71); | | ring-yellow-400 | —tw-ring-color: rgb(250, 204, 21); | | ring-yellow-500 | —tw-ring-color: rgb(234, 179, 8); | | ring-yellow-600 | —tw-ring-color: rgb(202, 138, 4); | | ring-yellow-700 | —tw-ring-color: rgb(161, 98, 7); | | ring-yellow-800 | —tw-ring-color: rgb(133, 77, 14); | | ring-yellow-900 | —tw-ring-color: rgb(113, 63, 18); | | ring-yellow-950 | —tw-ring-color: rgb(66, 32, 6); | | ring-lime-50 | —tw-ring-color: rgb(247, 254, 231); | | ring-lime-100 | —tw-ring-color: rgb(236, 252, 203); | | ring-lime-200 | —tw-ring-color: rgb(217, 249, 157); | | ring-lime-300 | —tw-ring-color: rgb(190, 242, 100); | | ring-lime-400 | —tw-ring-color: rgb(163, 230, 53); | | ring-lime-500 | —tw-ring-color: rgb(132, 204, 22); | | ring-lime-600 | —tw-ring-color: rgb(101, 163, 13); | | ring-lime-700 | —tw-ring-color: rgb(77, 124, 15); | | ring-lime-800 | —tw-ring-color: rgb(63, 98, 18); | | ring-lime-900 | —tw-ring-color: rgb(54, 83, 20); | | ring-lime-950 | —tw-ring-color: rgb(26, 46, 5); | | ring-green-50 | —tw-ring-color: rgb(240, 253, 244); | | ring-green-100 | —tw-ring-color: rgb(220, 252, 231); | | ring-green-200 | —tw-ring-color: rgb(187, 247, 208); | | ring-green-300 | —tw-ring-color: rgb(134, 239, 172); | | ring-green-400 | —tw-ring-color: rgb(74, 222, 128); | | ring-green-500 | —tw-ring-color: rgb(34, 197, 94); | | ring-green-600 | —tw-ring-color: rgb(22, 163, 74); | | ring-green-700 | —tw-ring-color: rgb(21, 128, 61); | | ring-green-800 | —tw-ring-color: rgb(22, 101, 52); | | ring-green-900 | —tw-ring-color: rgb(20, 83, 45); | | ring-green-950 | —tw-ring-color: rgb(5, 46, 22); | | ring-emerald-50 | —tw-ring-color: rgb(236, 253, 245); | | ring-emerald-100 | —tw-ring-color: rgb(209, 250, 229); | | ring-emerald-200 | —tw-ring-color: rgb(167, 243, 208); | | ring-emerald-300 | —tw-ring-color: rgb(110, 231, 183); | | ring-emerald-400 | —tw-ring-color: rgb(52, 211, 153); | | ring-emerald-500 | —tw-ring-color: rgb(16, 185, 129); | | ring-emerald-600 | —tw-ring-color: rgb(5, 150, 105); | | ring-emerald-700 | —tw-ring-color: rgb(4, 120, 87); | | ring-emerald-800 | —tw-ring-color: rgb(6, 95, 70); | | ring-emerald-900 | —tw-ring-color: rgb(6, 78, 59); | | ring-emerald-950 | —tw-ring-color: rgb(2, 44, 34); | | ring-teal-50 | —tw-ring-color: rgb(240, 253, 250); | | ring-teal-100 | —tw-ring-color: rgb(204, 251, 241); | | ring-teal-200 | —tw-ring-color: rgb(153, 246, 228); | | ring-teal-300 | —tw-ring-color: rgb(94, 234, 212); | | ring-teal-400 | —tw-ring-color: rgb(45, 212, 191); | | ring-teal-500 | —tw-ring-color: rgb(20, 184, 166); | | ring-teal-600 | —tw-ring-color: rgb(13, 148, 136); | | ring-teal-700 | —tw-ring-color: rgb(15, 118, 110); | | ring-teal-800 | —tw-ring-color: rgb(17, 94, 89); | | ring-teal-900 | —tw-ring-color: rgb(19, 78, 74); | | ring-teal-950 | —tw-ring-color: rgb(4, 47, 46); | | ring-cyan-50 | —tw-ring-color: rgb(236, 254, 255); | | ring-cyan-100 | —tw-ring-color: rgb(207, 250, 254); | | ring-cyan-200 | —tw-ring-color: rgb(165, 243, 252); | | ring-cyan-300 | —tw-ring-color: rgb(103, 232, 249); | | ring-cyan-400 | —tw-ring-color: rgb(34, 211, 238); | | ring-cyan-500 | —tw-ring-color: rgb(6, 182, 212); | | ring-cyan-600 | —tw-ring-color: rgb(8, 145, 178); | | ring-cyan-700 | —tw-ring-color: rgb(14, 116, 144); | | ring-cyan-800 | —tw-ring-color: rgb(21, 94, 117); | | ring-cyan-900 | —tw-ring-color: rgb(22, 78, 99); | | ring-cyan-950 | —tw-ring-color: rgb(8, 51, 68); | | ring-sky-50 | —tw-ring-color: rgb(240, 249, 255); | | ring-sky-100 | —tw-ring-color: rgb(224, 242, 254); | | ring-sky-200 | —tw-ring-color: rgb(186, 230, 253); | | ring-sky-300 | —tw-ring-color: rgb(125, 211, 252); | | ring-sky-400 | —tw-ring-color: rgb(56, 189, 248); | | ring-sky-500 | —tw-ring-color: rgb(14, 165, 233); | | ring-sky-600 | —tw-ring-color: rgb(2, 132, 199); | | ring-sky-700 | —tw-ring-color: rgb(3, 105, 161); | | ring-sky-800 | —tw-ring-color: rgb(7, 89, 133); | | ring-sky-900 | —tw-ring-color: rgb(12, 74, 110); | | ring-sky-950 | —tw-ring-color: rgb(8, 47, 73); | | ring-blue-50 | —tw-ring-color: rgb(239, 246, 255); | | ring-blue-100 | —tw-ring-color: rgb(219, 234, 254); | | ring-blue-200 | —tw-ring-color: rgb(191, 219, 254); | | ring-blue-300 | —tw-ring-color: rgb(147, 197, 253); | | ring-blue-400 | —tw-ring-color: rgb(96, 165, 250); | | ring-blue-500 | —tw-ring-color: rgb(59, 130, 246); | | ring-blue-600 | —tw-ring-color: rgb(37, 99, 235); | | ring-blue-700 | —tw-ring-color: rgb(29, 78, 216); | | ring-blue-800 | —tw-ring-color: rgb(30, 64, 175); | | ring-blue-900 | —tw-ring-color: rgb(30, 58, 138); | | ring-blue-950 | —tw-ring-color: rgb(23, 37, 84); | | ring-indigo-50 | —tw-ring-color: rgb(238, 242, 255); | | ring-indigo-100 | —tw-ring-color: rgb(224, 231, 255); | | ring-indigo-200 | —tw-ring-color: rgb(199, 210, 254); | | ring-indigo-300 | —tw-ring-color: rgb(165, 180, 252); | | ring-indigo-400 | —tw-ring-color: rgb(129, 140, 248); | | ring-indigo-500 | —tw-ring-color: rgb(99, 102, 241); | | ring-indigo-600 | —tw-ring-color: rgb(79, 70, 229); | | ring-indigo-700 | —tw-ring-color: rgb(67, 56, 202); | | ring-indigo-800 | —tw-ring-color: rgb(55, 48, 163); | | ring-indigo-900 | —tw-ring-color: rgb(49, 46, 129); | | ring-indigo-950 | —tw-ring-color: rgb(30, 27, 75); | | ring-violet-50 | —tw-ring-color: rgb(245, 243, 255); | | ring-violet-100 | —tw-ring-color: rgb(237, 233, 254); | | ring-violet-200 | —tw-ring-color: rgb(221, 214, 254); | | ring-violet-300 | —tw-ring-color: rgb(196, 181, 253); | | ring-violet-400 | —tw-ring-color: rgb(167, 139, 250); | | ring-violet-500 | —tw-ring-color: rgb(139, 92, 246); | | ring-violet-600 | —tw-ring-color: rgb(124, 58, 237); | | ring-violet-700 | —tw-ring-color: rgb(109, 40, 217); | | ring-violet-800 | —tw-ring-color: rgb(91, 33, 182); | | ring-violet-900 | —tw-ring-color: rgb(76, 29, 149); | | ring-violet-950 | —tw-ring-color: rgb(46, 16, 101); | | ring-purple-50 | —tw-ring-color: rgb(250, 245, 255); | | ring-purple-100 | —tw-ring-color: rgb(243, 232, 255); | | ring-purple-200 | —tw-ring-color: rgb(233, 213, 255); | | ring-purple-300 | —tw-ring-color: rgb(216, 180, 254); | | ring-purple-400 | —tw-ring-color: rgb(192, 132, 252); | | ring-purple-500 | —tw-ring-color: rgb(168, 85, 247); | | ring-purple-600 | —tw-ring-color: rgb(147, 51, 234); | | ring-purple-700 | —tw-ring-color: rgb(126, 34, 206); | | ring-purple-800 | —tw-ring-color: rgb(107, 33, 168); | | ring-purple-900 | —tw-ring-color: rgb(88, 28, 135); | | ring-purple-950 | —tw-ring-color: rgb(59, 7, 100); | | ring-fuchsia-50 | —tw-ring-color: rgb(253, 244, 255); | | ring-fuchsia-100 | —tw-ring-color: rgb(250, 232, 255); | | ring-fuchsia-200 | —tw-ring-color: rgb(245, 208, 254); | | ring-fuchsia-300 | —tw-ring-color: rgb(240, 171, 252); | | ring-fuchsia-400 | —tw-ring-color: rgb(232, 121, 249); | | ring-fuchsia-500 | —tw-ring-color: rgb(217, 70, 239); | | ring-fuchsia-600 | —tw-ring-color: rgb(192, 38, 211); | | ring-fuchsia-700 | —tw-ring-color: rgb(162, 28, 175); | | ring-fuchsia-800 | —tw-ring-color: rgb(134, 25, 143); | | ring-fuchsia-900 | —tw-ring-color: rgb(112, 26, 117); | | ring-fuchsia-950 | —tw-ring-color: rgb(74, 4, 78); | | ring-pink-50 | —tw-ring-color: rgb(253, 242, 248); | | ring-pink-100 | —tw-ring-color: rgb(252, 231, 243); | | ring-pink-200 | —tw-ring-color: rgb(251, 207, 232); | | ring-pink-300 | —tw-ring-color: rgb(249, 168, 212); | | ring-pink-400 | —tw-ring-color: rgb(244, 114, 182); | | ring-pink-500 | —tw-ring-color: rgb(236, 72, 153); | | ring-pink-600 | —tw-ring-color: rgb(219, 39, 119); | | ring-pink-700 | —tw-ring-color: rgb(190, 24, 93); | | ring-pink-800 | —tw-ring-color: rgb(157, 23, 77); | | ring-pink-900 | —tw-ring-color: rgb(131, 24, 67); | | ring-pink-950 | —tw-ring-color: rgb(80, 7, 36); | | ring-rose-50 | —tw-ring-color: rgb(255, 241, 242); | | ring-rose-100 | —tw-ring-color: rgb(255, 228, 230); | | ring-rose-200 | —tw-ring-color: rgb(254, 205, 211); | | ring-rose-300 | —tw-ring-color: rgb(253, 164, 175); | | ring-rose-400 | —tw-ring-color: rgb(251, 113, 133); | | ring-rose-500 | —tw-ring-color: rgb(244, 63, 94); | | ring-rose-600 | —tw-ring-color: rgb(225, 29, 72); | | ring-rose-700 | —tw-ring-color: rgb(190, 18, 60); | | ring-rose-800 | —tw-ring-color: rgb(159, 18, 57); | | ring-rose-900 | —tw-ring-color: rgb(136, 19, 55); | | ring-rose-950 | —tw-ring-color: rgb(76, 5, 25); |

Note: The * in ring-color-* represents a numeric value from 50 (lightest) to 950 (darkest). This comprehensive palette is available by default but can be fully customized in your tailwind.config.js file.

Core Application: Accessible Focus States

The most important use case for ring utilities is creating highly visible focus indicators for interactive elements like links, buttons, and form inputs. This is a critical aspect of web accessibility (a11y), ensuring that users who navigate with a keyboard can clearly see which element is currently active.

Example: Accessible Form Input

This example demonstrates how to style an input field. By default, it has a subtle gray border. When it receives focus, we use focus:ring-2 and focus:ring-blue-500 to add a prominent blue ring, making it clear to the user where they are typing. We also use focus:border-transparent to hide the base border to prevent a cluttered look.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tailwind CSS Ring Color</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-slate-100 flex items-center justify-center min-h-screen">
  <div class="w-full max-w-xs">
    <label for="email" class="block text-sm font-medium text-slate-700 mb-2">Email Address</label>
    <input type="email" id="email"
           class="w-full px-4 py-2 border border-slate-300 rounded-md shadow-sm
                  transition-all duration-150 ease-in-out
                  focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
           placeholder="you@example.com">
  </div>
</body>
</html>

Advanced Usage: Opacity and Hover States

You can further refine ring styles by controlling their opacity and changing them on hover or other states.

• Opacity: Add a / followed by an opacity value (from 0 to 100) to any ring color class. For example, ring-purple-600/50 sets the purple ring to 50% opacity.
• State Variants: Use prefixes like hover:, focus:, and active: to change the ring color, width, or offset in different states.

Example: Interactive Button with Ring Effects

This button demonstrates multiple ring features. It has no ring by default, but on hover, a semi-transparent purple ring appears. When focused (e.g., by tabbing to it), a solid, wider indigo ring is shown for clear accessibility.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tailwind CSS Ring Color States</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-slate-100 flex items-center justify-center min-h-screen">
  <button class="px-8 py-3 bg-white text-slate-800 font-semibold rounded-lg shadow-md
                 transition-all duration-200 ease-in-out
                 hover:ring-4 hover:ring-purple-600/50
                 focus:outline-none focus:ring-4 focus:ring-indigo-500">
    Hover or Focus Me
  </button>
</body>
</html>