stroke-width
Setting the width of the stroke to be applied to the SVG shape.
Overview
| Class | Declarations |
|---|---|
stroke-width:<size> | stroke-width: <size>;
|
Examples
Set SVG stroke width
A numeric stroke:* value sets stroke width in SVG user coordinates. In this 96 × 96 viewport with a 24 × 24 viewBox, one unit spans four screen pixels.
<!-- Width 1 · 4px painted line --><svg id="target" role="img" aria-label="Horizontal line with width one" width="96" height="96" viewBox="0 0 24 24" class="block fill:none stroke-blue-60 stroke-width:1"> <path d="M4 12h16" /></svg><!-- Width 2 · 8px painted line --><svg id="target" role="img" aria-label="Horizontal line with width two" width="96" height="96" viewBox="0 0 24 24" class="block fill:none stroke-blue-60 stroke-width:2"> <path d="M4 12h16" /></svg>Generated CSS
@layer utilities { .stroke-width\:1 { stroke-width: 1 } .stroke-width\:2 { stroke-width: 2 }}The readout may serialize the width with px, but the SVG viewBox transform still scales its paint. A value of 2 is not a spacing token or 2rem. The SVG element itself stays 96 × 96.
Pair width with stroke color
A width needs a visible stroke paint. Compare a 1.5-unit current-color stroke with the same shape using vector-effect:non-scaling-stroke.
<!-- Normal · 6px after viewBox scaling --><svg id="target" role="img" aria-label="Scaling horizontal stroke" width="96" height="96" viewBox="0 0 24 24" class="block fg-blue-60 fill:none stroke-current stroke-linecap:round stroke-width:1.5"> <path d="M4 12h16" /></svg><!-- Non-scaling · 1.5px on screen --><svg id="target" role="img" aria-label="Non-scaling horizontal stroke" width="96" height="96" viewBox="0 0 24 24" class="block fg-blue-60 fill:none stroke-current stroke-linecap:round stroke-width:1.5"> <path class="vector-effect:non-scaling-stroke" d="M4 12h16" /></svg>The vector effect belongs on the painted path and keeps its stroke from growing with the transform. Leave room around paths for thick strokes and round caps; the SVG viewport can clip paint at its edges.
Apply conditionally
Widen the preview to sm to double the stroke from one to two user units. Print returns to one unit.
<!-- Width 1 → 2 at sm --><svg id="target" role="img" aria-label="Responsive horizontal stroke" width="96" height="96" viewBox="0 0 24 24" class="block fill:none stroke-blue-60 stroke-width:1 stroke-width:1@print stroke-width:2@screen@sm"> <path d="M4 12h16" /></svg>The native viewport condition changes the inherited width. Its 24 × 24 viewBox and 96 × 96 layout box remain unchanged.