stroke-width

Ejemplos

Ejemplo básico

Usa utilidades stroke-<number> como stroke-1 y stroke-2 para establecer el grosor del trazo (stroke width) de un SVG:

<svg class="stroke-1 ..."></svg>
<svg class="stroke-2 ..."></svg>

Esto puede ser útil para estilizar conjuntos de iconos como Heroicons.

Usando un valor personalizado

Usa la sintaxis stroke-[<value>] para establecer el stroke width basado 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 agrega la función var() por ti automáticamente.

Responsive design

Prefija una utilidad stroke-width con una variante de breakpoint como md: para aplicar la utilidad solo en tamaños de pantalla medium y superiores:

<div class="stroke-1 md:stroke-2 ...">
  <!-- ... -->
</div>

Aprende más sobre el uso de variantes en la documentación de variantes.