Tailwind Ring Offset Color
The objective of this article is to shed some light on Tailwind ring offset color property and its classes with examples.
Tailwind Ring offsets are an extension of the ring color feature.
You can create a glow effect around an element by adding an offset color to the border created by the ring color feature.
This creates an offset effect that can be used to add visual interest to an element or to highlight it.
Tailwind Ring Offset Color Classes
Here are the all ring offset color classes that you can use in Tailwind CSS.
| Classes | Overview |
| ring-offset-inherit | The color of the parent element is used as the color of the ring offset. |
| ring-offset-transparent | This class is used to set the color of the ring offset as transparent. |
| ring-offset-current | Used to set the color of the ring offset to the current text color. |
| ring-offset-black | In this case, the color of the ring offset around an element is black. |
| ring-offset-white | The color of the ring offset is set to white. |
| ring-offset-gray-50 | The color of the ring offset is specified as a shade of gray. |
| ring-offset-red-50 | Using this class, the ring offset color is set as a shade of red. |
| ring-offset-blue-50 | A shade of blue is used as the color of the ring offset. |
| ring-offset-indigo-50 | This class is used to set the color of the ring offset as a shade of indigo. |
| ring-offset-purple-50 | This class applies the color of ring offset as a shade of purple. |
| ring-offset-green-50 | Applies a ring offset color that is a shade of green color. |
| ring-offset-yellow-50 | A shade of yellow is used as the color of the ring offset. |
| ring-offset-pink-50 | By using this class, the color of the ring offset is specified as a shade of pink. |
| ring-offset-slate-50 | The color of the ring offset is defined as a shade of slate. |
| ring-offset-neutral-50 | Used to set the color of the ring offset as a shade of neutral. |
| ring-offset-fuchsia-50 | This class is used to define the ring offset color as a shade of fuchsia. |
| ring-offset-amber-50 | The color of ring offset is specified as a shade of amber. |
| ring-offset-orange-50 | A shade of orange is set as the color of the ring offset. |
| ring-offset-stone-50 | Using this class, the color of the ring offset is specified as a shade of stone. |
| ring-offset-rose-50 | The color of the ring offset is defined as a shade of rose. |
| ring-offset-violet-50 | By using this class, the color of the ring offset is specified as a shade of violet. |
| ring-offset-zinc-50 | The ring offset color is specified as a shade of zinc using this class. |
| ring-offset-lime-50 | By using this class, the color of the ring offset is defined as a shade of lime. |
| ring-offset-emerald-50 | Applies a ring offset color that is a shade of emerald color. |
| ring-offset-teal-50 | Using this class, the color applied to the ring offset is a shade of teal. |
| ring-offset-cyan-50 | A shade of cyan is used as the color of the ring offset. |
| ring-offset-sky-50 | The ring offset color is specified as a shade of sky color. |
Note: The color values are changeable according to your need from 50,100-900. The increment should be 100, after 100.
Syntax
<element class="ring-offset-blue-500">...</element >
The following example demonstrates Tailwind ring offset color property using some classes:
Example:
<!DOCTYPE html>
<html><head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="m-3 text-center">
<h1 class="text-gray-700 text-2xl font-semibold">
MrExamples
</h1>
<p class="my-2 font-semibold">Ring Offset Color class in Tailwind CSS</p>
<div class="flex flex-wrap gap-8 p-2 font-medium mt-4">
<button class="ring-2 ring-current rounded-md bg-fuchsia-400
h-10 ring-offset-4 ring-offset-green-500 p-1">
ring-offset-green-500
</button>
<button class="ring-2 ring-current rounded-md bg-rose-400
h-10 ring-offset-4 ring-offset-yellow-400 p-1">
ring-offset-yellow-400
</button>
<button class="ring-2 ring-current rounded-md bg-amber-400
h-10 ring-offset-4 ring-offset-red-500 p-1">
ring-offset-red-500
</button>
<button class="ring-2 ring-current rounded-md bg-sky-400
h-10 ring-offset-4 ring-offset-orange-500 p-1">
ring-offset-orange-500
</button>
</div>
</body>
</html>
Remember: Tailwind ring offset color classes cannot be used without ring offset width classes.
Below example illustrates the use of ring offset color property using some of its classes in Tailwind:
Example:
<!DOCTYPE html>
<html><head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="m-3 text-center">
<h1 class="text-gray-700 text-2xl font-semibold">
MrExamples
</h1>
<p class="my-2 font-semibold">Ring Offset Color class in Tailwind CSS</p>
<div class="flex flex-wrap gap-8 p-2 font-medium mt-4">
<button class="ring-2 ring-current rounded-md bg-gray-400
h-10 ring-offset-4 ring-offset-slate-600 p-1">
ring-offset-slate-700
</button>
<button class="ring-2 ring-current rounded-md bg-rose-200
h-10 ring-offset-4 ring-offset-zinc-500 p-1">
ring-offset-zinc-800
</button>
<button class="ring-2 ring-current rounded-md bg-white
h-10 ring-offset-4 ring-offset-pink-500 p-1">
ring-offset-pink-500
</button>
<button class="ring-2 ring-current rounded-md bg-cyan-400
h-10 ring-offset-4 ring-offset-teal-700 p-1">
ring-offset-teal-700
</button>
</div>
</body>
</html>
Here is another example of Tailwind ring offset color attribute in action using some of its available classes:
Example:
<!DOCTYPE html>
<html><head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="m-3 text-center">
<h1 class="text-gray-700 text-2xl font-semibold">
MrExamples
</h1>
<p class="my-2 font-semibold">Ring Offset Color class in Tailwind CSS</p>
<div class="flex flex-wrap gap-8 p-2 font-medium mt-4">
<button class="ring-2 ring-current rounded-md bg-lime-400
h-10 ring-offset-4 ring-offset-neutral-500 p-1">
ring-offset-neutral-600
</button>
<button class="ring-2 ring-current rounded-md bg-indigo-200
h-10 ring-offset-4 ring-offset-inherit p-1">
ring-offset-inherit
</button>
<button class="ring-2 ring-current rounded-md bg-white
h-10 ring-offset-4 ring-offset-violet-600 p-1">
ring-offset-violet-600
</button>
<button class="ring-2 ring-current rounded-md bg-emerald-200
h-10 ring-offset-4 ring-offset-stone-600 p-1">
ring-offset-stone-600
</button>
</div>
</body>
</html>
Get exclusive access to our upcoming events, promotions, and insider tips by subscribing to our newsletter below.
We value your feedback.
+1
+1
+1
+1
+1
+1
+1
