stroke-width

用于设置 SVG 元素描边宽度的工具类。

快速参考

类	属性
stroke-<number>	stroke-width: <number>;
stroke-(length:<custom-property>)	stroke-width: var(<custom-property>);
stroke-[<value>]	stroke-width: <value>;

示例

基础示例

使用 stroke-1 和 stroke-2 等 stroke-<number> 工具类来设置 SVG 的描边宽度：

<!-- [!code classes:stroke-1,stroke-2] -->
<svg class="stroke-1 ..."></svg>
<svg class="stroke-2 ..."></svg>

这对于为 Heroicons 等图标集设置样式很有用。

使用自定义值

使用 stroke-[<value>] 等工具类，根据完全自定义的值设置描边宽度：

<div class="stroke-[1.5] ...">
 <!-- ... -->
</div>

对于 CSS 变量，也可以使用 stroke-(length:<custom-property>) 语法：

<div class="stroke-(length:--my-stroke-width) ...">
 <!-- ... -->
</div>

这只是 stroke-[length:var(<custom-property>)] 的简写，会自动为你加上 var() 函数。

响应式设计

使用 md: 等断点变体为 stroke-width 工具类添加前缀，使其仅在中等及以上屏幕尺寸生效：

<div class="stroke-1 md:stroke-2 ...">
 <!-- ... -->
</div>

在 变体文档 中了解如何使用变体。