stroke-width

示例(Examples)

¥Examples

基本示例(Basic example)

¥Basic example

使用 stroke-<number> 工具（如 stroke-1 和 stroke-2）设置 SVG 的笔触宽度：

¥Use stroke-<number> utilities like stroke-1 and stroke-2 to set the stroke width of an SVG:

<svg class="stroke-1 ..."></svg>
<svg class="stroke-2 ..."></svg>

这对于像 英雄偶像 这样的图标集样式很有用。

¥This can be useful for styling icon sets like Heroicons.

使用自定义值(Using a custom value)

¥Using a custom value

使用 stroke-[<value>] 语法 根据完全自定义的值设置 stroke width：

<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() 函数。

响应式设计(Responsive design)

¥Responsive design

在 stroke-width 工具前面使用断点变体如 md: 仅在 medium 屏幕尺寸及以上时应用工具：

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

请参阅 变体文档 详细了解如何使用变体。