Tailwind CSS - 轮廓宽度

使用 Tailwind CSS 创建无障碍轮廓

轮廓工具类控制元素轮廓的宽度。与边框不同，轮廓绘制在元素盒模型（box model）的外部，并且不占用布局空间。这使它们成为创建不会导致布局偏移的焦点指示器的完美工具。

轮廓宽度工具类

Tailwind 提供了一个用于轮廓宽度的数字比例。你可以在 tailwind.config.js 文件中自定义或扩展此比例。

类名	CSS 属性
outline-0	outline-width: 0px;
outline-1	outline-width: 1px;
outline-2	outline-width: 2px;
outline-4	outline-width: 4px;
outline-8	outline-width: 8px;

最佳实践：无障碍焦点指示器

轮廓最重要的用例是当元素通过键盘导航获得焦点时提供清晰的视觉反馈。在不提供替代方案（outline-none）的情况下移除轮廓是一个主要的无障碍性问题。

现代最佳实践使用 focus-visible 变体。这只在键盘焦点期间应用轮廓，而不是在鼠标点击时，为鼠标用户提供更整洁的体验。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
  <title>无障碍轮廓</title>
</head>
<body class="bg-slate-100 p-8 flex flex-col items-center space-y-6">
  <h2 class="text-2xl font-bold text-slate-800">无障碍表单</h2>
  <p>尝试使用键盘通过 Tab 键切换这些输入框。</p>

  <input type="text" placeholder="无自定义焦点... (浏览器默认)"
         class="p-2 border border-gray-300 rounded-md w-72">

  <input type="text" placeholder="不好：焦点时无轮廓"
         class="p-2 border border-gray-300 rounded-md w-72 focus:outline-none">

  <input type="text" placeholder="好：自定义焦点轮廓"
         class="p-2 border border-gray-300 rounded-md w-72 focus:outline-none focus:ring-2 focus:ring-violet-500">

  <button class="px-6 py-2 bg-blue-600 text-white rounded-md
                   focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-blue-400 focus-visible:ring-opacity-75">
    点击或使用 Tab 键选中我
  </button>
</body>
</html>

控制轮廓样式、颜色和偏移

Tailwind 提供了一整套用于处理轮廓的工具类：

• 颜色：outline-red-500、outline-blue-500 等。
• 样式：outline-dashed、outline-dotted（注意：outline-solid 是默认值）。
• 偏移：outline-offset-2、outline-offset-4 等，用于在元素及其轮廓之间创建空间。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
  <title>样式化轮廓</title>
</head>
<body class="bg-gray-100 p-8">
  <div class="space-y-6">
    <div class="p-4 bg-white border-2 border-gray-400 rounded-lg
                 outline outline-4 outline-offset-2 outline-dashed outline-pink-500">
      一个 4 像素宽、虚线样式、粉色轮廓，偏移量为 2 像素。
    </div>
    <div class="p-4 bg-white border-2 border-gray-400 rounded-lg
                 focus-within:outline focus-within:outline-4 focus-within:outline-green-500 transition-all">
      <p>当子元素获得焦点时，此容器会获得轮廓。</p>
      <input type="text" class="mt-2 p-1 border rounded" placeholder="选中我！">
    </div>
  </div>
</body>
</html>

轮廓与环形工具类

Tailwind 还包括 ring-{width} 工具类。它们与轮廓非常相似，但通过 box-shadow 实现。

• 在以下情况使用 outline： 你需要一条简单的实线，它能完美地遵循元素的形状（border-radius）并且不影响布局。
• 在以下情况使用 ring： 你需要一个可以偏移、模糊或需要将焦点指示器放置在元素内边距（ring-inset）内部的焦点指示器。环形通常更灵活，并且常用于现代焦点样式。