Stroke Width

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

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

For more information about Tailwind’s responsive design features, check out the documentation.

Control which stroke-width utilities Tailwind generates by customizing the section in your tailwind.config.js file:

Learn more about customizing the default theme in the theme customization documentation.

You can control which variants are generated for the stroke-width utilities by modifying the strokeWidth property in the variants section of your file.

For example, this config will also generate hover and focus variants:

Disabling

If you don’t plan to use the stroke-width utilities in your project, you can disable them entirely by setting the strokeWidth property to false in the corePlugins section of your config file:

Edit this page on GitHub