Tipografía
Utilidades para controlar el grosor de las decoraciones de texto.
| Clase | Estilos |
|---|---|
decoration-<number> | text-decoration-thickness: <number>px; |
decoration-from-font | text-decoration-thickness: from-font; |
decoration-auto | text-decoration-thickness: auto; |
decoration-(length:<custom-property>) | text-decoration-thickness: var(<custom-property>); |
decoration-[<value>] | text-decoration-thickness: <value>; |
Usa utilidades decoration-<number> como decoration-2 y decoration-4 para cambiar el grosor de la decoración de texto de un elemento:
El veloz zorro marrón salta sobre el perro perezoso.
El veloz zorro marrón salta sobre el perro perezoso.
El veloz zorro marrón salta sobre el perro perezoso.
<p class="underline decoration-1">El veloz zorro marrón...</p><p class="underline decoration-2">El veloz zorro marrón...</p><p class="underline decoration-4">El veloz zorro marrón...</p>Usa la sintaxis decoration-[<value>] para establecer el/la text decoration thickness basándose en un valor completamente personalizado:
<p class="decoration-[0.25rem] ..."> Lorem ipsum dolor sit amet...</p>Para variables CSS, también puedes usar la sintaxis decoration-(length:<custom-property>) :
<p class="decoration-(length:--my-decoration-thickness) ..."> Lorem ipsum dolor sit amet...</p>Esto es solo un atajo para decoration-[length:var(<custom-property>)] que añade la función var() por ti automáticamente.
Antepone a la utilidad text-decoration-thickness el prefijo de una variante de punto de ruptura como md: para aplicar la utilidad únicamente en tamaños de pantalla mediano y superiores:
<p class="underline md:decoration-4 ..."> Lorem ipsum dolor sit amet...</p>Obtén más información sobre el uso de variantes en la documentación de variantes.