SVG
Утилиты для стилизации ширины обводки SVG элементов.
| Class | Styles |
|---|---|
stroke-<number> | stroke-width: <number>; |
stroke-(length:<custom-property>) | stroke-width: var(<custom-property>); |
stroke-[<value>] | stroke-width: <value>; |
Используйте утилиты stroke-<number> как stroke-1 и stroke-2 для установки ширины обводки SVG:
<svg class="stroke-1 ..."></svg><svg class="stroke-2 ..."></svg>Это может быть полезно для стилизации наборов иконок, таких как Heroicons.
Используйте синтаксис stroke-[<value>] , чтобы задать stroke width на основе полностью пользовательского значения:
<div class="stroke-[1.5] ..."> <!-- ... --></div>Для переменных CSS вы также можете использовать синтаксис: stroke-(length:<custom-property>)
<div class="stroke-(length:--my-stroke-width) ..."> <!-- ... --></div>Это просто сокращение, stroke-[length:var(<custom-property>)] которое автоматически добавляет функцию var().
Префикс a stroke-width утилита с вариантом контрольной точки, например md:, чтобы применить утилиту только при размерах экрана medium и выше:
<div class="stroke-1 md:stroke-2 ..."> <!-- ... --></div>Подробнее об использовании вариантов читайте в документации по вариантам.