Skip to content
Related Articles

Related Articles

Tailwind CSS Ring Offset Color

View Discussion
Improve Article
Save Article
  • Last Updated : 23 Mar, 2022
View Discussion
Improve Article
Save Article

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 :

Start Your Coding Journey Now!