Stroke Width

Utilities for styling the stroke width of SVG elements.

Use the utilities to set the stroke width of an SVG.

This can be useful for styling icon sets like .

For a complete list of all available state modifiers, check out the Hover, Focus, & Other States documentation.

You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use to apply the stroke-2 utility at only medium screen sizes and above.

To learn more, check out the documentation on Responsive Design, and other media query modifiers.

By default, Tailwind includes stroke-width utilities for creating basic grids with up to 6 equal width rows. You can customize these values by editing or theme.extend.strokeWidth in your tailwind.config.js file.

tailwind.config.js

Learn more about customizing the default theme in the documentation.

If you need to use a one-off stroke-width value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.

Learn more about arbitrary value support in the documentation.