Tailwind CSS - 环形颜色

Tailwind CSS：使用描边颜色进行样式设计

Tailwind 的 ring-color 工具类提供了一种强大的方式，可以为元素添加描边。与 border 不同，描边是绘制在元素盒模型的外部，因此它们不会影响元素的布局。它们在创建可访问的焦点指示器方面特别有用。

描边颜色工具类

你可以使用 ring-{color} 类来设置描边颜色，这些颜色源自 Tailwind 广泛且完全可定制的调色板。只有在同时应用了描边宽度（例如 ring-2）时，描边才可见。

| Class | CSS Properties | | 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); |

注意：ring-color-* 中的 * 代表一个从 50（最浅）到 950（最深）的数值。这个全面的调色板默认可用，但可以在你的 tailwind.config.js 文件中完全自定义。

核心应用：可访问的焦点状态

描边工具类最重要的用例是为链接、按钮和表单输入框等交互式元素创建高可见度的焦点指示器。这是 Web 可访问性 (a11y) 的一个关键方面，可确保使用键盘导航的用户能够清楚地看到当前哪个元素处于活动状态。

示例：可访问的表单输入框

此示例演示了如何样式化输入字段。默认情况下，它具有一个不显眼的灰色边框。当它获得焦点时，我们使用 focus:ring-2 和 focus:ring-blue-500 来添加一个显著的蓝色描边，使用户清楚地知道他们正在输入的位置。我们还使用 focus:border-transparent 来隐藏基础边框，以防止界面显得杂乱。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tailwind CSS Ring Color</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-slate-100 flex items-center justify-center min-h-screen">
  <div class="w-full max-w-xs">
    <label for="email" class="block text-sm font-medium text-slate-700 mb-2">Email Address</label>
    <input type="email" id="email"
           class="w-full px-4 py-2 border border-slate-300 rounded-md shadow-sm
                  transition-all duration-150 ease-in-out
                  focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
           placeholder="you@example.com">
  </div>
</body>
</html>

高级用法：不透明度和悬停状态

你可以通过控制描边的不透明度以及在悬停或其他状态下改变它们来进一步优化描边样式。

• 不透明度：在任何描边颜色类后添加 /，后跟一个不透明度值（从 0 到 100）。例如，ring-purple-600/50 将紫色描边设置为 50% 不透明度。
• 状态变体：使用 hover:、focus: 和 active: 等前缀，在不同状态下改变描边颜色、宽度或偏移。

示例：带描边效果的交互式按钮

此按钮演示了多种描边功能。默认情况下它没有描边，但在悬停时，会出现一个半透明的紫色描边。当获得焦点时（例如，通过 Tab 键导航到它），会显示一个实心、更宽的靛蓝色描边，以确保清晰的可访问性。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tailwind CSS Ring Color States</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-slate-100 flex items-center justify-center min-h-screen">
  <button class="px-8 py-3 bg-white text-slate-800 font-semibold rounded-lg shadow-md
                 transition-all duration-200 ease-in-out
                 hover:ring-4 hover:ring-purple-600/50
                 focus:outline-none focus:ring-4 focus:ring-indigo-500">
    Hover or Focus Me
  </button>
</body>
</html>