Tailwind CSS Ring Offset Color
Last Updated : 23 Jul, 2025
This class accepts lots of value in tailwind CSS in which all the properties are covered in class form. By using this class we can color any ring-offset. In CSS, we do that by using the CSS Color property.
Ring Color classes:
- ring-offset-transparent: The ring-offset color will be transparent.
- ring-offset-current: The ring-offset color will depend on the parent element color.
- ring-offset-black: The ring-offset color will be black.
- ring-offset-white: The ring-offset color will be white.
- ring-offset-gray-50: The ring-offset color will be gray.
- ring-offset-red-50: The ring-offset color will be red.
- ring-offset-blue-50: The ring-offset color will be blue.
- ring-offset-indigo-50: The ring-offset color will be indigo.
- ring-offset-purple-50: The ring-offset color will be purple.
- ring-offset-green-50: The ring-offset color will be green.
- ring-offset-yellow-50: The ring-offset color will be yellow.
- ring-offset-pink-50: The ring-offset color will be pink.
Note: The color’s values can be changeable according to your need from 50-900, the span should be 100, after the 100.
Syntax:
<button class="ring-offset-{color}">...</button > Example:
HTML <!DOCTYPE html> <html> <head> <link href= "https://unpkg.com/tailwindcss@1.9.6/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="text-center"> <h1 class="text-green-600 text-5xl font-bold"> GeeksforGeeks </h1> <b>Tailwind CSS Ring Offset Color Class</b> <div class="mx-16 grid grid-cols-2 gap-6 p-2"> <button class="ring-4 ring-green-600 ring-offset-4 ring-offset-green-700 bg-green-400 ring-opacity-25 w-full h-12 rounded-lg"> ring-offset-4 ring-offset-green-700 </button> <button class="ring-4 ring-green-600 bg-green-400 ring-offset-4 ring-offset-yellow-700 ring-opacity-25 w-full h-12 rounded-lg"> ring-offset-4 ring-offset-yellow-700 </button> </div> </body> </html>
Note: Currently the browsers are not supported by Tailwind CSS Ring Width, so for the output, I share the link of the output (Tailwind CSS Playground)
ring-offset