stroke-width

Setting the width of the stroke to be applied to the SVG shape.

Overview

Examples

Set SVG stroke width

Use stroke:* with a size value to set stroke-width.

<svg class="stroke:2" viewBox="0 0 16 16" aria-hidden="true">    <path d="M2 8h12" /></svg>

@layer utilities {    .stroke\:2 {        stroke-width: 2    }}

Pair width with stroke color

Use stroke for paint and stroke:* size values for thickness.

<svg class="stroke:current stroke:1.5" aria-hidden="true"></svg>

Very thick strokes may need adjusted SVG viewBox or line caps to avoid clipping.

Apply conditionally

Apply styles based on different states using selectors and conditional queries.

<svg class="stroke:1 stroke:2@sm stroke:1@print">...</svg>