Skip to content
Related Articles

Related Articles

Improve Article
Tailwind CSS Ring Offset Color
  • Last Updated : 02 Mar, 2021

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-offsettransparent: The ring-offset color will be transparent.
  • ring-offsetcurrent: The ring-offset color will depend on the parent element color.
  • ring-offsetblack: The ring-offset color will be black.
  • ring-offsetwhite: The ring-offset color will be white.
  • ring-offsetgray-50: The ring-offset color will be gray.
  • ring-offsetred-50: The ring-offset color will be red.
  • ring-offsetblue-50: The ring-offset color will be blue.
  • ring-offsetindigo-50: The ring-offset color will be indigo.
  • ring-offsetpurple-50: The ring-offset color will be purple.
  • ring-offsetgreen-50: The ring-offset color will be green.
  • ring-offsetyellow-50: The ring-offset color will be yellow.
  • ring-offsetpink-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.0/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




My Personal Notes arrow_drop_up
Recommended Articles
Page :