Tailwind CSS - 描边

Tailwind CSS - SVG 描边颜色

用于设置 SVG 元素描边颜色的工具类。这些类允许你轻松地为图标和形状的轮廓设置样式，使其与你的设计系统无缝集成。

核心概念

在 Tailwind 中样式化 SVG 描边类似于样式化文本颜色或边框颜色。你使用 stroke-{color} 工具类。为了使这些类生效，SVG 本身不能有内联的 stroke 属性会覆盖 CSS，并且它通常应该有 fill="none" 或使用像 fill-transparent 这样的填充工具类。

常用的描边工具类

你的项目调色板的全部颜色都可用于描边。以下是最基本的类：

类名	CSS 属性	描述
`stroke-none`	`stroke: none;`	从 SVG 中移除描边。
`stroke-current`	`stroke: currentColor;`	将描边颜色设置为当前文本颜色。对于按钮内部的图标非常有用。
`stroke-transparent`	`stroke: transparent;`	将描边颜色设置为透明。
`stroke-{color}-{shade}`	`stroke: #...;`	将描边设置为主题中的特定颜色（例如 `stroke-blue-500`）。

注意： 有关所有可用颜色工具类的完整列表，请参阅 Tailwind CSS 描边官方文档。

实际应用：创建图标按钮

在此示例中，我们将创建一个设置按钮。内部的齿轮图标将使用 stroke-current，其颜色将继承自按钮的文本颜色。当鼠标悬停在按钮上时，文本和图标的描边颜色都会改变，从而创建连贯的交互体验。

示例：交互式图标

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SVG Stroke Color Example</title>
  <!-- 为演示目的，我们使用 Tailwind Play CDN。在实际项目中，请通过构建步骤设置 Tailwind CSS。 -->
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-slate-100 dark:bg-slate-900 antialiased font-sans flex items-center justify-center min-h-screen p-4">

  <div class="space-y-4 text-center">
    <h1 class="text-2xl font-bold text-slate-900 dark:text-white">SVG Stroke Color & Interaction</h1>
    <p class="text-slate-600 dark:text-slate-400">Hover over the icon to see the stroke color change.</p>

    <div class="p-4">
        <!-- 一个可访问的图标按钮 -->
        <button class="group flex items-center justify-center p-3 rounded-full bg-slate-200 dark:bg-slate-800 hover:bg-blue-500 dark:hover:bg-blue-500 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-slate-100 dark:focus:ring-offset-slate-900">
            <span class="sr-only">Settings</span>
            <!-- SVG 图标 -->
            <svg
                class="h-6 w-6 text-slate-700 dark:text-slate-300 group-hover:text-white transition-colors duration-200"
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                stroke-width="1.5"
                stroke="currentColor"
                aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.438.995s.145.755.438.995l1.003.827c.48.398.668 1.03.26 1.431l-1.296 2.247a1.125 1.125 0 01-1.37.49l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.063-.374-.313-.686-.645-.87a6.52 6.52 0 01-.22-.127c-.324-.196-.72-.257-1.075-.124l-1.217.456a1.125 1.125 0 01-1.37-.49l-1.296-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.437-.995s-.145-.755-.437-.995l-1.004-.827a1.125 1.125 0 01-.26-1.431l1.296-2.247a1.125 1.125 0 011.37-.49l1.217.456c.355.133.75.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.213-1.28z" />
                <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
            </svg>
        </button>
    </div>
  </div>
</body>
</html>

调试技巧

如果你的 stroke-* 类不生效，请检查以下常见问题：

内联 SVG 属性： SVG 代码本身可能在 <svg> 或 <path> 标签中直接写入了 stroke="somecolor"。这种内联属性将始终覆盖 Tailwind 的 CSS 类。将其移除以允许 Tailwind 控制样式。
缺少描边宽度： 如果描边没有宽度，则描边颜色将不可见。请确保你正在使用描边宽度工具类（例如 stroke-1、stroke-2），或者 SVG 具有 stroke-width 属性。
填充与描边： 确保你打算为描边着色，而不是填充。如果你只希望看到形状的轮廓，请使用 fill-none 或 fill-transparent。