stroke

示例(Examples)

¥Examples

基本示例(Basic example)

¥Basic example

使用 stroke-indigo-500 和 stroke-lime-600 等工具更改 SVG 的描边颜色：

¥Use utilities like stroke-indigo-500 and stroke-lime-600 to change the stroke color of an SVG:

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

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

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

使用当前颜色(Using the current color)

¥Using the current color

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

¥Use the stroke-current utility to set the stroke color to the current text color:

<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>

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

¥Using a custom value

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

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

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

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

这只是简写，用于 stroke-[var(<custom-property>)] 它会自动为你添加 var() 函数。

响应式设计(Responsive design)

¥Responsive design

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

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

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

自定义主题(Customizing your theme)

¥Customizing your theme

使用 --color-* 主题变量来自定义项目中的 color 工具：

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

现在 stroke-regal-blue 工具可用于你的标记：

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

在此详细了解如何自定义主题： 主题文档。