1. SVG
  2. stroke

SVG

stroke

用于设置 SVG 元素描边样式的实用工具。

类名样式
stroke-none
stroke: none;
stroke-inherit
stroke: inherit;
stroke-current
stroke: currentColor;
stroke-transparent
stroke: transparent;
stroke-black
stroke: var(--color-black); /* #000 */
stroke-white
stroke: var(--color-white); /* #fff */
stroke-red-50
stroke: var(--color-red-50); /* oklch(97.1% 0.013 17.38) */
stroke-red-100
stroke: var(--color-red-100); /* oklch(93.6% 0.032 17.717) */
stroke-red-200
stroke: var(--color-red-200); /* oklch(88.5% 0.062 18.334) */
stroke-red-300
stroke: var(--color-red-300); /* oklch(80.8% 0.114 19.571) */

示例

基本示例

使用像 stroke-indigo-500stroke-lime-600 这样的工具类来更改 SVG 的描边颜色

<svg class="stroke-cyan-500 ...">
<!-- ... -->
</svg>

这对于样式化像 Heroicons 这样的图标集非常有用。

使用当前颜色

使用 stroke-current 工具类将描边颜色设置为当前文本颜色

鼠标悬停在按钮上以查看描边颜色变化

<button class="bg-white text-pink-600 hover:bg-pink-600 hover:text-white ...">
<svg class="size-5 stroke-current ..." fill="none">
<!-- ... -->
</svg>
Download file
</button>

使用自定义值

使用 stroke-[<value>] 语法 来设置描边颜色以基于完全自定义的值

<svg class="stroke-[#243c5a] ...">
<!-- ... -->
</svg>

对于 CSS 变量,您也可以使用 stroke-(<custom-property>) 语法

<svg class="stroke-(--my-stroke-color) ...">
<!-- ... -->
</svg>

这只是 stroke-[var(<custom-property>)] 的简写形式,它会自动为您添加 var() 函数。

响应式设计

前缀一个 stroke 工具类 使用像 md: 这样的断点变体作为前缀,以仅在中等 屏幕尺寸及以上应用该工具类

<svg class="stroke-cyan-500 md:stroke-cyan-700 ...">
<!-- ... -->
</svg>

变体文档中了解更多关于使用变体的信息。

自定义您的主题

使用 --color-* 主题变量自定义颜色 项目中的工具类

@theme {
--color-regal-blue: #243c5a;
}

现在 stroke-regal-blue 工具类可以在您的标记中使用了

<svg class="stroke-regal-blue">
<!-- ... -->
</svg>

主题文档中了解更多关于自定义主题的信息 主题文档.

Copyright © 2025 Tailwind Labs Inc.·Trademark Policy