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-(<custom-property>) | text-decoration-thickness: var(<custom-property>); |
decoration-[<value>] | text-decoration-thickness: <value>; |
Usa las utilidades decoration-<number> como decoration-2 y decoration-4 para cambiar el grosor de la decoración de texto de un elemento:
El rápido zorro marrón salta sobre el perro perezoso.
El rápido zorro marrón salta sobre el perro perezoso.
El rápido zorro marrón salta sobre el perro perezoso.
<p class="underline decoration-1">El rápido zorro marrón...</p><p class="underline decoration-2">El rápido zorro marrón...</p><p class="underline decoration-4">El rápido zorro marrón...</p>Usa la sintaxis decoration-[<value>] para establecer el text decoration thickness basado 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-(<custom-property>) :
<p class="decoration-(--my-decoration-thickness) ..."> Lorem ipsum dolor sit amet...</p>Esto es solo un atajo para decoration-[var(<custom-property>)] que agrega la función var() por ti automáticamente.
Prefija una utilidad text-decoration-thickness con una variante de breakpoint como md: para aplicar la utilidad solo en tamaños de pantalla medium y superiores:
<p class="underline md:decoration-4 ..."> Lorem ipsum dolor sit amet...</p>Aprende más sobre el uso de variantes en la documentación de variantes.