Các tiện ích để tạo kiểu cho độ rộng nét vẽ của các phần tử SVG.
| Class | Styles |
|---|---|
stroke-<number> | stroke-width: <number>; |
stroke-(length:<custom-property>) | stroke-width: var(<custom-property>); |
stroke-[<value>] | stroke-width: <value>; |
Sử dụng các tiện ích stroke-<number> như stroke-1 và stroke-2 để đặt độ rộng nét vẽ của SVG:
<svg class="stroke-1 ..."></svg><svg class="stroke-2 ..."></svg>Điều này có thể hữu ích để tạo kiểu cho các bộ icon như Heroicons.
Use the stroke-[<value>] syntax to set the stroke width based on a completely custom value:
<div class="stroke-[1.5] ..."> <!-- ... --></div>For CSS variables, you can also use the stroke-(length:<custom-property>) syntax:
<div class="stroke-(length:--my-stroke-width) ..."> <!-- ... --></div>This is just a shorthand for stroke-[length:var(<custom-property>)] that adds the var() function for you automatically.
Prefix a stroke-width utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:
<div class="stroke-1 md:stroke-2 ..."> <!-- ... --></div>Learn more about using variants in the variants documentation.