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
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
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
23 Mar, 2022
Like Article
Save Article