SVG
Utilidades para dar estilo al ancho del trazo (stroke width) de elementos SVG.
| Clase | Estilos |
|---|---|
stroke-<number> | stroke-width: <number>; |
stroke-(length:<custom-property>) | stroke-width: var(<custom-property>); |
stroke-[<value>] | stroke-width: <value>; |
Utiliza utilidades stroke-<number> como stroke-1 y stroke-2 para establecer el ancho de trazo de un SVG:
<svg class="stroke-1 ..."></svg><svg class="stroke-2 ..."></svg>Esto puede ser útil para dar estilo a conjuntos de iconos como Heroicons.
Usa la sintaxis stroke-[<value>] para establecer el/la stroke width basándose en un valor completamente personalizado:
<div class="stroke-[1.5] ..."> <!-- ... --></div>Para variables CSS, también puedes usar la sintaxis stroke-(length:<custom-property>) :
<div class="stroke-(length:--my-stroke-width) ..."> <!-- ... --></div>Esto es solo un atajo para stroke-[length:var(<custom-property>)] que añade la función var() por ti automáticamente.
Antepone a la utilidad stroke-width el prefijo de una variante de punto de ruptura como md: para aplicar la utilidad únicamente en tamaños de pantalla mediano y superiores:
<div class="stroke-1 md:stroke-2 ..."> <!-- ... --></div>Obtén más información sobre el uso de variantes en la documentación de variantes.