Tailwind CSS - Ring Color
Tailwind CSS Ring Color 由预定义类组成，可以轻松设置和调整元素周围环形的颜色。
Tailwind CSS Ring Color 类
以下是 Tailwind CSS Ring Color 环形颜色类列表，可用于更改元素周围环形的颜色。
| 类 | CSS 属性 |
|---|---|
| ring-inherit | --tw-ring-color: inherit; |
| ring-current | --tw-ring-color: currentColor; |
| ring-transparent | --tw-ring-color: transparent; |
| ring-black | --tw-ring-color: rgb(0, 0, 0); |
| ring-white | --tw-ring-color: rgb(255, 255, 255); |
| ring-slate-50 | --tw-ring-color: rgb(248, 250, 252); |
| ring-slate-100 | --tw-ring-color: rgb(241, 245, 249); |
| ring-slate-200 | --tw-ring-color: rgb(226, 232, 240); |
| ring-slate-300 | --tw-ring-color: rgb(203, 213, 225); |
| ring-slate-400 | --tw-ring-color: rgb(148, 163, 184); |
| ring-slate-500 | --tw-ring-color: rgb(100, 116, 139); |
| ring-slate-600 | --tw-ring-color: rgb(71, 85, 105); |
| ring-slate-700 | --tw-ring-color: rgb(51, 65, 85); |
| ring-slate-800 | --tw-ring-color: rgb(30, 41, 59); |
| ring-slate-900 | --tw-ring-color: rgb(15, 23, 42); |
| ring-slate-950 | --tw-ring-color: rgb(2, 6, 23); |
| ring-gray-50 | --tw-ring-color: rgb(249, 250, 251); |
| ring-gray-100 | --tw-ring-color: rgb(243, 244, 246); |
| ring-gray-200 | --tw-ring-color: rgb(229, 231, 235); |
| ring-gray-300 | --tw-ring-color: rgb(209, 213, 219); |
| ring-gray-400 | --tw-ring-color: rgb(156, 163, 175); |
| ring-gray-500 | --tw-ring-color: rgb(107, 114, 128); |
| ring-gray-600 | --tw-ring-color: rgb(75, 85, 99); |
| ring-gray-700 | --tw-ring-color: rgb(55, 65, 81); |
| ring-gray-800 | --tw-ring-color: rgb(31, 41, 55); |
| ring-gray-900 | --tw-ring-color: rgb(17, 24, 39); |
| ring-gray-950 | --tw-ring-color: rgb(3, 7, 18); |
| ring-zinc-50 | --tw-ring-color: rgb(250, 250, 250); |
| ring-zinc-100 | --tw-ring-color: rgb(244, 244, 245); |
| ring-zinc-200 | --tw-ring-color: rgb(228, 228, 231); |
| ring-zinc-300 | --tw-ring-color: rgb(212, 212, 216); |
| ring-zinc-400 | --tw-ring-color: rgb(161, 161, 170); |
| ring-zinc-500 | --tw-ring-color: rgb(113, 113, 122); |
| ring-zinc-600 | --tw-ring-color: rgb(82, 82, 91); |
| ring-zinc-700 | --tw-ring-color: rgb(63, 63, 70); |
| ring-zinc-800 | --tw-ring-color: rgb(39, 39, 42); |
| ring-zinc-900 | --tw-ring-color: rgb(24, 24, 27); |
| ring-zinc-950 | --tw-ring-color: rgb(9, 9, 11); |
| ring-neutral-50 | --tw-ring-color: rgb(250, 250, 250); |
| ring-neutral-100 | --tw-ring-color: rgb(245, 245, 245); |
| ring-neutral-200 | --tw-ring-color: rgb(229, 229, 229); |
| ring-neutral-300 | --tw-ring-color: rgb(212, 212, 212); |
| ring-neutral-400 | --tw-ring-color: rgb(163, 163, 163); |
| ring-neutral-500 | --tw-ring-color: rgb(115, 115, 115); |
| ring-neutral-600 | --tw-ring-color: rgb(82, 82, 82); |
| ring-neutral-700 | --tw-ring-color: rgb(64, 64, 64); |
| ring-neutral-800 | --tw-ring-color: rgb(38, 38, 38); |
| ring-neutral-900 | --tw-ring-color: rgb(23, 23, 23); |
| ring-neutral-950 | --tw-ring-color: rgb(10, 10, 10); |
| ring-stone-50 | --tw-ring-color: rgb(250, 250, 249); |
| ring-stone-100 | --tw-ring-color: rgb(245, 245, 244); |
| ring-stone-200 | --tw-ring-color: rgb(231, 229, 228); |
| ring-stone-300 | --tw-ring-color: rgb(214, 211, 209); |
| ring-stone-400 | --tw-ring-color: rgb(168, 162, 158); |
| ring-stone-500 | --tw-ring-color: rgb(120, 113, 108); |
| ring-stone-600 | --tw-ring-color: rgb(87, 83, 78); |
| ring-stone-700 | --tw-ring-color: rgb(68, 64, 60); |
| ring-stone-800 | --tw-ring-color: rgb(41, 37, 36); |
| ring-stone-900 | --tw-ring-color: rgb(28, 25, 23); |
| ring-stone-950 | --tw-ring-color: rgb(12, 10, 9); |
| ring-red-50 | --tw-ring-color: rgb(254, 242, 242); |
| ring-red-100 | --tw-ring-color: rgb(254, 226, 226); |
| ring-red-200 | --tw-ring-color: rgb(254, 202, 202); |
| ring-red-300 | --tw-ring-color: rgb(252, 165, 165); |
| ring-red-400 | --tw-ring-color: rgb(248, 113, 113); |
| ring-red-500 | --tw-ring-color: rgb(239, 68, 68); |
| ring-red-600 | --tw-ring-color: rgb(220, 38, 38); |
| ring-red-700 | --tw-ring-color: rgb(185, 28, 28); |
| ring-red-800 | --tw-ring-color: rgb(153, 27, 27); |
| ring-red-900 | --tw-ring-color: rgb(127, 29, 29); |
| ring-red-950 | --tw-ring-color: rgb(69, 10, 10); |
| ring-orange-50 | --tw-ring-color: rgb(255, 247, 237); |
| ring-orange-100 | --tw-ring-color: rgb(255, 237, 213); |
| ring-orange-200 | --tw-ring-color: rgb(254, 215, 170); |
| ring-orange-300 | --tw-ring-color: rgb(253, 186, 116); |
| ring-orange-400 | --tw-ring-color: rgb(251, 146, 60); |
| ring-orange-500 | --tw-ring-color: rgb(249, 115, 22); |
| ring-orange-600 | --tw-ring-color: rgb(234, 88, 12); |
| ring-orange-700 | --tw-ring-color: rgb(194, 65, 12); |
| ring-orange-800 | --tw-ring-color: rgb(154, 52, 18); |
| ring-orange-900 | --tw-ring-color: rgb(124, 45, 18); |
| ring-orange-950 | --tw-ring-color: rgb(67, 20, 7); |
| ring-amber-50 | --tw-ring-color: rgb(255, 251, 235); |
| ring-amber-100 | --tw-ring-color: rgb(254, 243, 199); |
| ring-amber-200 | --tw-ring-color: rgb(253, 230, 138); |
| ring-amber-300 | --tw-ring-color: rgb(252, 211, 77); |
| ring-amber-400 | --tw-ring-color: rgb(251, 191, 36); |
| ring-amber-500 | --tw-ring-color: rgb(245, 158, 11); |
| ring-amber-600 | --tw-ring-color: rgb(217, 119, 6); |
| ring-amber-700 | --tw-ring-color: rgb(180, 83, 9); |
| ring-amber-800 | --tw-ring-color: rgb(146, 64, 14); |
| ring-amber-900 | --tw-ring-color: rgb(120, 53, 15); |
| ring-amber-950 | --tw-ring-color: rgb(69, 26, 3); |
| ring-yellow-50 | --tw-ring-color: rgb(254, 252, 232); |
| ring-yellow-100 | --tw-ring-color: rgb(254, 249, 195); |
| ring-yellow-200 | --tw-ring-color: rgb(254, 240, 138); |
| ring-yellow-300 | --tw-ring-color: rgb(253, 224, 71); |
| ring-yellow-400 | --tw-ring-color: rgb(250, 204, 21); |
| ring-yellow-500 | --tw-ring-color: rgb(234, 179, 8); |
| ring-yellow-600 | --tw-ring-color: rgb(202, 138, 4); |
| ring-yellow-700 | --tw-ring-color: rgb(161, 98, 7); |
| ring-yellow-800 | --tw-ring-color: rgb(133, 77, 14); |
| ring-yellow-900 | --tw-ring-color: rgb(113, 63, 18); |
| ring-yellow-950 | --tw-ring-color: rgb(66, 32, 6); |
| ring-lime-50 | --tw-ring-color: rgb(247, 254, 231); |
| ring-lime-100 | --tw-ring-color: rgb(236, 252, 203); |
| ring-lime-200 | --tw-ring-color: rgb(217, 249, 157); |
| ring-lime-300 | --tw-ring-color: rgb(190, 242, 100); |
| ring-lime-400 | --tw-ring-color: rgb(163, 230, 53); |
| ring-lime-500 | --tw-ring-color: rgb(132, 204, 22); |
| ring-lime-600 | --tw-ring-color: rgb(101, 163, 13); |
| ring-lime-700 | --tw-ring-color: rgb(77, 124, 15); |
| ring-lime-800 | --tw-ring-color: rgb(63, 98, 18); |
| ring-lime-900 | --tw-ring-color: rgb(54, 83, 20); |
| ring-lime-950 | --tw-ring-color: rgb(26, 46, 5); |
| ring-green-50 | --tw-ring-color: rgb(240, 253, 244); |
| ring-green-100 | --tw-ring-color: rgb(220, 252, 231); |
| ring-green-200 | --tw-ring-color: rgb(187, 247, 208); |
| ring-green-300 | --tw-ring-color: rgb(134, 239, 172); |
| ring-green-400 | --tw-ring-color: rgb(74, 222, 128); |
| ring-green-500 | --tw-ring-color: rgb(34, 197, 94); |
| ring-green-600 | --tw-ring-color: rgb(22, 163, 74); |
| ring-green-700 | --tw-ring-color: rgb(21, 128, 61); |
| ring-green-800 | --tw-ring-color: rgb(22, 101, 52); |
| ring-green-900 | --tw-ring-color: rgb(20, 83, 45); |
| ring-green-950 | --tw-ring-color: rgb(5, 46, 22); |
| ring-emerald-50 | --tw-ring-color: rgb(236, 253, 245); |
| ring-emerald-100 | --tw-ring-color: rgb(209, 250, 229); |
| ring-emerald-200 | --tw-ring-color: rgb(167, 243, 208); |
| ring-emerald-300 | --tw-ring-color: rgb(110, 231, 183); |
| ring-emerald-400 | --tw-ring-color: rgb(52, 211, 153); |
| ring-emerald-500 | --tw-ring-color: rgb(16, 185, 129); |
| ring-emerald-600 | --tw-ring-color: rgb(5, 150, 105); |
| ring-emerald-700 | --tw-ring-color: rgb(4, 120, 87); |
| ring-emerald-800 | --tw-ring-color: rgb(6, 95, 70); |
| ring-emerald-900 | --tw-ring-color: rgb(6, 78, 59); |
| ring-emerald-950 | --tw-ring-color: rgb(2, 44, 34); |
| ring-teal-50 | --tw-ring-color: rgb(240, 253, 250); |
| ring-teal-100 | --tw-ring-color: rgb(204, 251, 241); |
| ring-teal-200 | --tw-ring-color: rgb(153, 246, 228); |
| ring-teal-300 | --tw-ring-color: rgb(94, 234, 212); |
| ring-teal-400 | --tw-ring-color: rgb(45, 212, 191); |
| ring-teal-500 | --tw-ring-color: rgb(20, 184, 166); |
| ring-teal-600 | --tw-ring-color: rgb(13, 148, 136); |
| ring-teal-700 | --tw-ring-color: rgb(15, 118, 110); |
| ring-teal-800 | --tw-ring-color: rgb(17, 94, 89); |
| ring-teal-900 | --tw-ring-color: rgb(19, 78, 74); |
| ring-teal-950 | --tw-ring-color: rgb(4, 47, 46); |
| ring-cyan-50 | --tw-ring-color: rgb(236, 254, 255); |
| ring-cyan-100 | --tw-ring-color: rgb(207, 250, 254); |
| ring-cyan-200 | --tw-ring-color: rgb(165, 243, 252); |
| ring-cyan-300 | --tw-ring-color: rgb(103, 232, 249); |
| ring-cyan-400 | --tw-ring-color: rgb(34, 211, 238); |
| ring-cyan-500 | --tw-ring-color: rgb(6, 182, 212); |
| ring-cyan-600 | --tw-ring-color: rgb(8, 145, 178); |
| ring-cyan-700 | --tw-ring-color: rgb(14, 116, 144); |
| ring-cyan-800 | --tw-ring-color: rgb(21, 94, 117); |
| ring-cyan-900 | --tw-ring-color: rgb(22, 78, 99); |
| ring-cyan-950 | --tw-ring-color: rgb(8, 51, 68); |
| ring-sky-50 | --tw-ring-color: rgb(240, 249, 255); |
| ring-sky-100 | --tw-ring-color: rgb(224, 242, 254); |
| ring-sky-200 | --tw-ring-color: rgb(186, 230, 253); |
| ring-sky-300 | --tw-ring-color: rgb(125, 211, 252); |
| ring-sky-400 | --tw-ring-color: rgb(56, 189, 248); |
| ring-sky-500 | --tw-ring-color: rgb(14, 165, 233); |
| ring-sky-600 | --tw-ring-color: rgb(2, 132, 199); |
| ring-sky-700 | --tw-ring-color: rgb(3, 105, 161); |
| ring-sky-800 | --tw-ring-color: rgb(7, 89, 133); |
| ring-sky-900 | --tw-ring-color: rgb(12, 74, 110); |
| ring-sky-950 | --tw-ring-color: rgb(8, 47, 73); |
| ring-blue-50 | --tw-ring-color: rgb(239, 246, 255); |
| ring-blue-100 | --tw-ring-color: rgb(219, 234, 254); |
| ring-blue-200 | --tw-ring-color: rgb(191, 219, 254); |
| ring-blue-300 | --tw-ring-color: rgb(147, 197, 253); |
| ring-blue-400 | --tw-ring-color: rgb(96, 165, 250); |
| ring-blue-500 | --tw-ring-color: rgb(59, 130, 246); |
| ring-blue-600 | --tw-ring-color: rgb(37, 99, 235); |
| ring-blue-700 | --tw-ring-color: rgb(29, 78, 216); |
| ring-blue-800 | --tw-ring-color: rgb(30, 64, 175); |
| ring-blue-900 | --tw-ring-color: rgb(30, 58, 138); |
| ring-blue-950 | --tw-ring-color: rgb(23, 37, 84); |
| ring-indigo-50 | --tw-ring-color: rgb(238, 242, 255); |
| ring-indigo-100 | --tw-ring-color: rgb(224, 231, 255); |
| ring-indigo-200 | --tw-ring-color: rgb(199, 210, 254); |
| ring-indigo-300 | --tw-ring-color: rgb(165, 180, 252); |
| ring-indigo-400 | --tw-ring-color: rgb(129, 140, 248); |
| ring-indigo-500 | --tw-ring-color: rgb(99, 102, 241); |
| ring-indigo-600 | --tw-ring-color: rgb(79, 70, 229); |
| ring-indigo-700 | --tw-ring-color: rgb(67, 56, 202); |
| ring-indigo-800 | --tw-ring-color: rgb(55, 48, 163); |
| ring-indigo-900 | --tw-ring-color: rgb(49, 46, 129); |
| ring-indigo-950 | --tw-ring-color: rgb(30, 27, 75); |
| ring-violet-50 | --tw-ring-color: rgb(245, 243, 255); |
| ring-violet-100 | --tw-ring-color: rgb(237, 233, 254); |
| ring-violet-200 | --tw-ring-color: rgb(221, 214, 254); |
| ring-violet-300 | --tw-ring-color: rgb(196, 181, 253); |
| ring-violet-400 | --tw-ring-color: rgb(167, 139, 250); |
| ring-violet-500 | --tw-ring-color: rgb(139, 92, 246); |
| ring-violet-600 | --tw-ring-color: rgb(124, 58, 237); |
| ring-violet-700 | --tw-ring-color: rgb(109, 40, 217); |
| ring-violet-800 | --tw-ring-color: rgb(91, 33, 182); |
| ring-violet-900 | --tw-ring-color: rgb(76, 29, 149); |
| ring-violet-950 | --tw-ring-color: rgb(46, 16, 101); |
| ring-purple-50 | --tw-ring-color: rgb(250, 245, 255); |
| ring-purple-100 | --tw-ring-color: rgb(243, 232, 255); |
| ring-purple-200 | --tw-ring-color: rgb(233, 213, 255); |
| ring-purple-300 | --tw-ring-color: rgb(216, 180, 254); |
| ring-purple-400 | --tw-ring-color: rgb(192, 132, 252); |
| ring-purple-500 | --tw-ring-color: rgb(168, 85, 247); |
| ring-purple-600 | --tw-ring-color: rgb(147, 51, 234); |
| ring-purple-700 | --tw-ring-color: rgb(126, 34, 206); |
| ring-purple-800 | --tw-ring-color: rgb(107, 33, 168); |
| ring-purple-900 | --tw-ring-color: rgb(88, 28, 135); |
| ring-purple-950 | --tw-ring-color: rgb(59, 7, 100); |
| ring-fuchsia-50 | --tw-ring-color: rgb(253, 244, 255); |
| ring-fuchsia-100 | --tw-ring-color: rgb(250, 232, 255); |
| ring-fuchsia-200 | --tw-ring-color: rgb(245, 208, 254); |
| ring-fuchsia-300 | --tw-ring-color: rgb(240, 171, 252); |
| ring-fuchsia-400 | --tw-ring-color: rgb(232, 121, 249); |
| ring-fuchsia-500 | --tw-ring-color: rgb(217, 70, 239); |
| ring-fuchsia-600 | --tw-ring-color: rgb(192, 38, 211); |
| ring-fuchsia-700 | --tw-ring-color: rgb(162, 28, 175); |
| ring-fuchsia-800 | --tw-ring-color: rgb(134, 25, 143); |
| ring-fuchsia-900 | --tw-ring-color: rgb(112, 26, 117); |
| ring-fuchsia-950 | --tw-ring-color: rgb(74, 4, 78); |
| ring-pink-50 | --tw-ring-color: rgb(253, 242, 248); |
| ring-pink-100 | --tw-ring-color: rgb(252, 231, 243); |
| ring-pink-200 | --tw-ring-color: rgb(251, 207, 232); |
| ring-pink-300 | --tw-ring-color: rgb(249, 168, 212); |
| ring-pink-400 | --tw-ring-color: rgb(244, 114, 182); |
| ring-pink-500 | --tw-ring-color: rgb(236, 72, 153); |
| ring-pink-600 | --tw-ring-color: rgb(219, 39, 119); |
| ring-pink-700 | --tw-ring-color: rgb(190, 24, 93); |
| ring-pink-800 | --tw-ring-color: rgb(157, 23, 77); |
| ring-pink-900 | --tw-ring-color: rgb(131, 24, 67); |
| ring-pink-950 | --tw-ring-color: rgb(80, 7, 36); |
| ring-rose-50 | --tw-ring-color: rgb(255, 241, 242); |
| ring-rose-100 | --tw-ring-color: rgb(255, 228, 230); |
| ring-rose-200 | --tw-ring-color: rgb(254, 205, 211); |
| ring-rose-300 | --tw-ring-color: rgb(253, 164, 175); |
| ring-rose-400 | --tw-ring-color: rgb(251, 113, 133); |
| ring-rose-500 | --tw-ring-color: rgb(244, 63, 94); |
| ring-rose-600 | --tw-ring-color: rgb(225, 29, 72); |
| ring-rose-700 | --tw-ring-color: rgb(190, 18, 60); |
| ring-rose-800 | --tw-ring-color: rgb(159, 18, 57); |
| ring-rose-900 | --tw-ring-color: rgb(136, 19, 55); |
| ring-rose-950 | --tw-ring-color: rgb(76, 5, 25); |
Tailwind CSS 环形颜色类的功能
- ring-inherit: 使用父元素的环形颜色。
- ring-current: 将环形颜色设置为元素的当前文本颜色。
- ring-transparent: 使环形颜色不可见。
- ring-black: 将环形颜色设置为黑色。
- ring-white: 将环形颜色设置为白色。
- ring-slate-*: 将各种深浅的石板色应用于环形。
- ring-gray-*: 将各种深浅的灰色应用于环形。
- ring-zinc-*: 将各种深浅的锌色应用于戒指。
- ring-neutral-*: 为戒指应用各种中性色调。
- ring-stone-*: 为戒指应用各种色调的宝石色。
- ring-red-*: 为戒指应用各种色调的红色。
- ring-orange-*: 为戒指应用各种色调的橙色。
- ring-amber-*: 为戒指应用各种色调的琥珀色。
- ring-yellow-*: 为戒指应用各种色调的黄色。
- ring-lime-*: 为戒指应用各种色调的黄绿色。
- ring-green-*: 为戒指应用各种色调的绿色到戒指上。
- ring-emerald-*:为戒指应用各种深浅的祖母绿颜色。
- ring-teal-*:为戒指应用各种深浅的青绿色。
- ring-cyan-*:为戒指应用各种深浅的青色。
- ring-sky-*:为戒指应用各种深浅的天空颜色。
- ring-blue-*:为戒指应用各种深浅的蓝色。
- ring-indigo-*:为戒指应用各种深浅的靛蓝色。
- ring-violet-*:为戒指应用各种深浅的紫色戒指。
- ring-purple-*:为戒指应用各种深浅的紫色。
- ring-fuchsia-*:为戒指应用各种深浅的紫红色。
- ring-pink-*:为戒指应用各种深浅的粉红色。
- ring-rose-*:为戒指应用各种深浅的玫瑰色。
注意:在'ring-color-*'类中，"*"表示从50(最浅色调)到950(最深色调)的数值。
Tailwind CSS 戒指颜色类示例
以下是 Tailwind CSS 戒指颜色的示例这些类展示了如何应用和调整元素周围圆环的颜色。这些类可以轻松地使用不同的颜色自定义圆环的外观。
设置圆环颜色类
Tailwind CSS 的 ring-color-* 实用类可以轻松地设置容器内元素周围圆环的样式。每个类都包含一个颜色名称(例如"红色"、"蓝色"等)和一个数字(例如"300"、"400"、"500")，以表示从浅到深的不同色调。
此示例展示了如何应用这些圆环颜色类来改善容器内元素的视觉外观。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-4">
<h2 class="text-2xl font-bold mb-6">
Tailwind CSS Ring Color
</h2>
<div class="grid grid-cols-3 gap-6">
<p class="ring-slate-600 ring-4 border border-black
p-4 rounded-md">
<strong>ring-slate-600</strong>
</p>
<p class="ring-red-600 ring-4 border border-black
p-4 rounded-md">
<strong>ring-red-600</strong>
</p>
<p class="ring-emerald-600 ring-4 border border-black
p-4 rounded-md">
<strong>ring-emerald-600</strong>
</p>
<p class="ring-indigo-600 ring-4 border border-black
p-4 rounded-md">
<strong>ring-indigo-600</strong>
</p>
<p class="ring-fuchsia-600 ring-4 border border-black
p-4 rounded-md">
<strong>ring-fuchsia-600</strong>
</p>
<p class="ring-pink-600 ring-4 border border-black
p-4 rounded-md">
<strong>ring-pink-600</strong>
</p>
</div>
<p class="mt-6 text-center underline font-semibold">
Use <strong>ring-color-*</strong> classes to
apply different ring colors.
</p>
</body>
</html>
不同透明度的环颜色
此示例展示如何使用 Tailwind CSS ring-color* 类将不同深浅的青色应用于元素之间的环。每个 ring-color-* 类指定不同的深浅，范围从青色 900(最深)到青色 200(最浅)。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-4">
<h2 class="text-2xl font-bold mb-6">
Tailwind CSS Ring Color
</h2>
<h3 class="underline font-bold mb-4">
Applying Ring Colors with Different Opacities:</h3>
<div class="space-y-5">
<p class="ring-cyan-900 ring-4 border border-black
p-2 rounded-md">
<strong>Darkest shade of
cyan for a strong contrast.</strong>
</p>
<p class="ring-cyan-700 ring-4 border border-black
p-2 rounded-md">
<strong>Dark cyan for a slightly
lighter ring effect.</strong>
</p>
<p class="ring-cyan-500 ring-4 border border-black
p-2 rounded-md">
<strong>Medium cyan shade for a
balanced ring color.</strong>
</p>
<p class="ring-cyan-300 ring-4 border border-black
p-2 rounded-md">
<strong>Light cyan for a
softer ring appearance.</strong>
</p>
<p class="ring-cyan-200 ring-4 border border-black
p-2 rounded-md">
<strong>Lightest cyan shade
for a subtle ring effect.</strong>
</p>
</div>
</body>
</html>
悬停时显示不同的环颜色
此示例展示了如何使用 Tailwind CSS 环颜色类，在鼠标悬停在元素上时为其应用不同颜色的环。
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-4">
<h2 class="text-2xl font-bold mb-6">
Tailwind CSS Ring Color
</h2>
<h3 class="font-bold underline mb-4">
Hover to see ring colors:
</h3>
<div class="grid grid-cols-2 gap-6">
<p class="hover:ring-inset border border-black p-4
rounded-md hover:ring-8 hover:ring-teal-400">
<strong>Teal Ring inset</strong>
</p>
<p class="ring-0 border border-black p-4
rounded-md hover:ring-8 hover:ring-purple-500">
<strong>Purple Ring </strong>
</p>
</div>
</body>
</html>
