Stroke width

Utilities for styling the stroke width of SVG elements


Class reference

ClassProperties
stroke-0stroke-width: 0;
stroke-1stroke-width: 1;
stroke-2stroke-width: 2;

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

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