Elements logo

Stroke width

Utilities for styling the stroke width of SVG elements

Class reference

ClassProperties
stoke-0stroke-width: 0;
stokestroke-width: 1px;
stoke-1stroke-width: 1px;
stoke-2stroke-width: 2px;
stoke-4stroke-width: 4px;
stoke-6stroke-width: 6px;
stoke-8stroke-width: 8px;
vector-effect-scaling-strokevector-effect: non-scaling-stroke;

Usage

Use the .stroke-{width} utilities to set the stroke width of an SVG.

Useful for styling icon sets like Feather that are drawn entirely with strokes.

<svg class="stroke-current stroke-1 text-teal-400 ..."></svg>
<svg class="stroke-current stroke-2 text-teal-400 ..."></svg>

You can prevent stroke widths from scaling when resizing the SVG by setting non-scaling-stroke.

<svg class="stroke-current stroke-1 text-teal-400 ..."></svg>
<svg class="stroke-current stroke-2 text-teal-400 ..."></svg>

Responsive

To control the stroke width of an SVG element at a specific breakpoint, add a {screen}: prefix to any existing width utility. For example, adding the class md:stroke-2 to an element would apply the stroke-2 utility at medium screen sizes and above.

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

For more information about Elements’ responsive design features, check out the Responsive Design documentation.