Tailwind CSS Ring Color

Tailwind CSS provides ring color utility classes to set the color of an outline-like ring around an element. These utilities can be used with ring width classes to create colored rings around buttons, inputs, and other HTML elements.

• ring-inherit: Sets the ring color to inherit from its parent.
• ring-current: Sets the ring color to the element's current text color.
• ring-transparent: Makes the ring transparent.
• ring-black: Sets the ring color to black.
• ring-white: Sets the ring color to white.
• ring-red-500: Sets the ring color to red.
• ring-blue-500: Sets the ring color to blue.
• ring-green-500: Sets the ring color to green.
• ring-yellow-500: Sets the ring color to yellow.
• ring-indigo-500: Sets the ring color to indigo.
• ring-purple-500: Sets the ring color to purple.
• ring-pink-500: Sets the ring color to pink.
• ring-gray-500: Sets the ring color to gray.

Tailwind CSS also supports different shades of colors, such as ring-blue-100, ring-blue-500, and ring-blue-900. You can adjust the ring color's opacity using modifiers such as ring-blue-500/50.

Syntax

<button class="ring-4 ring-{color}">Button</button>

Here, ring-4 sets the ring width to 4px, and ring-{color} specifies its color.

Example: 

<!--Driver Code Starts-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
    <title>Tailwind CSS Ring Color</title>
</head>
<!--Driver Code Ends-->

<body class="min-h-screen bg-gray-100 p-8">
    <h1 class="mb-8 text-center text-2xl font-bold">
        Tailwind CSS Ring Color
    </h1>
    <div class="mx-auto grid max-w-2xl grid-cols-2 gap-6 sm:grid-cols-3">
        <button class="rounded-lg bg-white p-4 ring-4 ring-red-500">
            Red Ring
        </button>
        <button class="rounded-lg bg-white p-4 ring-4 ring-green-500">
            Green Ring
        </button>
        <button class="rounded-lg bg-white p-4 ring-4 ring-blue-500">
            Blue Ring
        </button>
        <button class="rounded-lg bg-white p-4 ring-4 ring-yellow-500">
            Yellow Ring
        </button>
        <button class="rounded-lg bg-white p-4 ring-4 ring-pink-500">
            Pink Ring
        </button>
        <button class="rounded-lg bg-white p-4 ring-4 ring-purple-500/50">
            Purple Ring
        </button>
    </div>
</body>

<!--Driver Code Starts-->
</html>
<!--Driver Code Ends-->

Output: The page displays six buttons with differently colored rings. The purple ring uses 50% color opacity.