Stroke width

import { ApiTable } from "@/components/api-table.tsx"; import { ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx";

export const title = "stroke-width"; export const description = "Utilities for styling the stroke width of SVG elements.";

", "stroke-width: \;"], ["stroke-(length:\)", "stroke-width: var(\);"], ["stroke-[\]", "stroke-width: \;"], ]} />

Examples

Basic example

Use stroke-<number> utilities like stroke-1 and stroke-2 to set the stroke width of an SVG:

{

}

<!-- [!code classes:stroke-1,stroke-2] -->
<svg class="stroke-1 ..."></svg>
<svg class="stroke-2 ..."></svg>

This can be useful for styling icon sets like Heroicons.

Using a custom value

Responsive design