Tailwind CSS - 描边宽度

Tailwind CSS - SVG 描边宽度

Tailwind 提供了工具类来控制 SVG 元素的描边宽度。这允许你在 HTML 中直接为图标和其他矢量图形设置样式，使你的样式与设计系统保持一致。

描边宽度类

默认情况下，Tailwind 包含一些基本的描边宽度工具类。这个尺寸可以在 tailwind.config.js 文件中轻松自定义。

类名	CSS 属性
stroke-0	stroke-width: 0;
stroke-1	stroke-width: 1;
stroke-2	stroke-width: 2;

实际应用

在现代 Web 开发中，样式化 SVG 是一项常见任务。让我们探讨如何使用描边宽度工具类来创建交互式且视觉吸引力强的图标。

示例：交互式图标样式

在此示例中，我们将样式化一个简单的对勾图标。描边宽度将在悬停时改变，为用户提供视觉反馈。我们还使用 stroke-current 使图标颜色继承自其父元素的文本颜色。

<!--
  对于现代开发，建议使用 Vite 或 Next.js 等构建工具来设置 Tailwind CSS。
  为简化此演示，我们使用 Tailwind Play CDN。
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tailwind SVG Stroke Width Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 p-8 flex flex-col items-center justify-center min-h-screen">

  <h2 class="text-2xl font-bold mb-6 text-gray-800">
   Interactive SVG Icon
  </h2>

  <button class="px-6 py-3 bg-blue-600 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 flex items-center space-x-2 transition-all">
    <span>Confirm Action</span>
    <!--
      - `size-6` 设置宽度和高度。
      - `stroke-current` 使描边颜色与父元素的文本颜色（白色）匹配。
      - `stroke-2` 设置默认描边宽度。
      - `group-hover:stroke-1` 是在父元素悬停时改变描边的示例（如果按钮有 `group` 类）。
      - `hover:stroke-1` 会在你悬停 SVG 本身时生效。
    -->
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
      stroke-width="2"
      stroke="currentColor"
      class="size-6 transition-all duration-300 transform hover:scale-125 hover:stroke-1">
      <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
    </svg>
  </button>

  <p class="mt-4 text-gray-600 text-center max-w-md">Hover over the icon inside the button. The stroke width smoothly transitions from `2` to `1` and the icon scales up, creating a delightful micro-interaction.</p>

</body>
</html>

自定义和最佳实践

• stroke-current 是你的好帮手： 使用 stroke-current 让你的 SVG 继承父元素的 color 属性。这使它们易于主题化和重用。
• 自定义你的尺寸： 如果你需要更多描边宽度选项，可以轻松地将它们添加到 tailwind.config.js 文件中的 theme.extend.strokeWidth 下。
• 优化 SVG： 在项目中使用 SVG 之前，请通过 SVGO 等优化工具对其进行处理，以删除不必要的代码并减小文件大小。
• 可访问性： 当使用 SVG 作为图标时，请确保它们具有适当的可访问性属性。如果它们纯粹是装饰性的，请使用 aria-hidden="true"。如果它们传达了含义，请在 SVG 内部使用 <title> 元素和/或 aria-label。