Open In App

Tailwind CSS Ring Color

Improve
Improve
Like Article
Like
Save
Share
Report

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. In CSS, we do that by using the CSS Color property.

Ring Color classes:

  • ring-transparent: The ring color will be transparent.
  • ring-current: The ring color will depend on the parent element color.
  • ring-black: The ring color will be black.
  • ring-white: The ring color will be white.
  • ring-gray-50: The ring color will be gray.
  • ring-red-50: The ring color will be red.
  • ring-blue-50: The ring color will be blue.
  • ring-indigo-50: The ring color will be indigo.
  • ring-purple-50: The ring color will be purple.
  • ring-green-50: The ring color will be green.
  • ring-yellow-50: The ring color will be yellow.
  • ring-pink-50: The ring color will be pink.

Note: The color’s values can be changeable according to your need from 50-900, the span should be 100.

Syntax:

<button class="ring-{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"
    <div class="mx-16 grid grid-cols-5 gap-4 p-2">
        <button class="ring-4 ring-red-600 bg-green-400 
                       w-full h-12 rounded-lg">
            Ring-4
        </button>
                <button class="ring-4 ring-green-600 bg-green-400 
                       w-full h-12 rounded-lg">
            Ring-4
        </button>
        <button class="ring-4 ring-blue-600 bg-green-400 
                       w-full h-12 rounded-lg">
            Ring-4
        </button>
        <button class="ring-4 ring-yellow-600 bg-green-400 
                       w-full h-12 rounded-lg">
            Ring-4
        </button>
        <button class="ring-4 ring-pink-600 bg-green-400 
                       w-full h-12 rounded-lg">
            Ring-4
        </button>
    </div>
  </body>
</html>


Note: Currently the browsers are not supported by Tailwind CSS Ring Color, so for the output, I share the link of the output (Tailwind CSS Playground)

Output: 

Tailwind Ring Color



Last Updated : 23 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads