stroke-width.mdx

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.";

<ApiTable rows={[ ["stroke-", "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