Tailwind CSS - Ring Color

Previous
Next

Tailwind CSS Ring Color consists of predefined classes that make it easy to set and adjust the color of the ring around an element.

Tailwind CSS Ring Color Classes

Below is a list of Tailwind CSS Ring Color classes, which allow you to change the color of the ring around an element.

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);

Functionality Of Tailwind CSS Ring Color Classes

  • ring-inherit: Uses the ring color of the parent element.
  • ring-current: Sets the ring color to the current text color of the element.
  • ring-transparent: Makes the ring color invisible.
  • ring-black: Sets the ring color to black.
  • ring-white: Sets the ring color to white.
  • ring-slate-*: Applies various shades of slate color to the ring.
  • ring-gray-*: Applies various shades of gray color to the ring.
  • ring-zinc-*: Applies various shades of zinc color to the ring.
  • ring-neutral-*: Applies various neutral shades to the ring.
  • ring-stone-*: Applies various shades of stone color to the ring.
  • ring-red-*: Applies various shades of red color to the ring.
  • ring-orange-*: Applies various shades of orange color to the ring.
  • ring-amber-*: Applies various shades of amber color to the ring.
  • ring-yellow-*: Applies various shades of yellow color to the ring.
  • ring-lime-*: Applies various shades of lime color to the ring.
  • ring-green-*: Applies various shades of green color to the ring.
  • ring-emerald-*: Applies various shades of emerald color to the ring.
  • ring-teal-*: Applies various shades of teal color to the ring.
  • ring-cyan-*: Applies various shades of cyan color to the ring.
  • ring-sky-*: Applies various shades of sky color to the ring.
  • ring-blue-*: Applies various shades of blue color to the ring.
  • ring-indigo-*: Applies various shades of indigo color to the ring.
  • ring-violet-*: Applies various shades of violet color to the ring.
  • ring-purple-*: Applies various shades of purple color to the ring.
  • ring-fuchsia-*: Applies various shades of fuchsia color to the ring.
  • ring-pink-*: Applies various shades of pink color to the ring.
  • ring-rose-*: Applies various shades of rose color to the ring.

Note: In the 'ring-color-*' classes, '*' represents a numeric value ranging from 50 (lightest shade) to 950 (darkest shade).

Tailwind CSS Ring Color Class Examples

Below are examples of Tailwind CSS Ring color classes that show how to apply and adjust the color of the ring around elements. These classes make it easy to customize the ring's appearance with different colors.

Setting Ring Color Classes

Tailwind CSS's ring-color-* utility classes make it easy to style the ring around elements within a container. Each class combines a color name (like 'red', 'blue', etc.) with a number (such as '300', '400', '500') to indicate different shades from light to dark.

This example shows how to apply these ring color classes to improve the visual appearance of elements within a container.

Example

  
<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-2xl font-bold mb-6">
        Tailwind CSS Ring Color
    </h2> 
    <div class="grid grid-cols-3 gap-6">
        <p class="ring-slate-600 ring-4 border border-black 
                p-4 rounded-md">
            <strong>ring-slate-600</strong>
        </p>
        <p class="ring-red-600 ring-4 border border-black 
                p-4 rounded-md">
            <strong>ring-red-600</strong>
        </p>
        <p class="ring-emerald-600 ring-4 border border-black 
                p-4 rounded-md">
            <strong>ring-emerald-600</strong>
        </p>
        <p class="ring-indigo-600 ring-4 border border-black 
                p-4 rounded-md">
            <strong>ring-indigo-600</strong>
        </p>
         <p class="ring-fuchsia-600 ring-4 border border-black 
                p-4 rounded-md">
            <strong>ring-fuchsia-600</strong>
        </p>
         <p class="ring-pink-600 ring-4 border border-black 
                p-4 rounded-md">
            <strong>ring-pink-600</strong>
        </p>
    </div>
    <p class="mt-6 text-center underline font-semibold">
        Use <strong>ring-color-*</strong> classes to 
        apply different ring colors.
    </p>
</body>

</html>

Ring Colors with Different Opacities

This example shows how to use Tailwind CSS ring-color* classes to apply different shades of cyan to the rings between elements. Each ring-color-* class specifies a different shade, ranging from cyan 900 (darkest) to cyan 200(lightest).

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-2xl font-bold mb-6">
        Tailwind CSS Ring Color
    </h2> 
    <h3 class="underline font-bold mb-4">
        Applying Ring Colors with Different Opacities:</h3>
    <div class="space-y-5">
        <p class="ring-cyan-900 ring-4 border border-black 
                p-2 rounded-md">
            <strong>Darkest shade of 
            cyan for a strong contrast.</strong>
        </p>
        <p class="ring-cyan-700 ring-4 border border-black 
                p-2 rounded-md">
            <strong>Dark cyan for a slightly 
            lighter ring effect.</strong>
        </p>
        <p class="ring-cyan-500 ring-4 border border-black 
                p-2 rounded-md">
            <strong>Medium cyan shade for a 
            balanced ring color.</strong>
        </p>
        <p class="ring-cyan-300 ring-4 border border-black 
                p-2 rounded-md">
            <strong>Light cyan for a 
            softer ring appearance.</strong>
        </p>
        <p class="ring-cyan-200 ring-4 border border-black 
                p-2 rounded-md">
            <strong>Lightest cyan shade 
            for a subtle ring effect.</strong>
        </p>
    </div>
</body>

</html>

Different Ring Colors On Hover

This example shows how to use Tailwind CSS Ring color classes to apply different colored rings around elements when you hover over them.

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-2xl font-bold mb-6">
        Tailwind CSS Ring Color
    </h2>
    <h3 class="font-bold underline mb-4">
        Hover to see ring colors:
    </h3>
    <div class="grid grid-cols-2 gap-6">
        <p class="hover:ring-inset border border-black p-4
            rounded-md hover:ring-8 hover:ring-teal-400">
            <strong>Teal Ring inset</strong>
        </p>
        <p class="ring-0 border border-black p-4 
            rounded-md hover:ring-8 hover:ring-purple-500">
            <strong>Purple Ring </strong>
        </p>
    </div>
</body>

</html>
Print Page
Previous
Next
Advertisements