描边

示例

基本示例

使用像 stroke-indigo-500 和 stroke-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>
  下载文件
</button>

使用自定义值

Use the stroke-[<value>] syntax to set the 描边颜色 based on a completely custom value:

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

For CSS variables, you can also use the stroke-(<custom-property>) syntax:

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

This is just a shorthand for stroke-[var(<custom-property>)] that adds the var() function for you automatically.

响应式设计

Prefix a stroke utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:

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

Learn more about using variants in the variants documentation.

自定义主题

Use the --color-* theme variables to customize the color utilities in your project:

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

Now the stroke-regal-blue utility can be used in your markup:

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

Learn more about customizing your theme in the theme documentation.