1. Tipografía
  2. text-decoration-style

Tipografía

text-decoration-style

Utilidades para controlar el estilo de las decoraciones de texto.

ClaseEstilos
decoration-solid
text-decoration-style: solid;
decoration-double
text-decoration-style: double;
decoration-dotted
text-decoration-style: dotted;
decoration-dashed
text-decoration-style: dashed;
decoration-wavy
text-decoration-style: wavy;

Ejemplos

Ejemplo básico

Usa utilidades como decoration-dotted y decoration-dashed para cambiar el estilo de la decoración de texto de un elemento:

decoration-solid

El veloz zorro marrón salta sobre el perro perezoso.

decoration-double

El veloz zorro marrón salta sobre el perro perezoso.

decoration-dotted

El veloz zorro marrón salta sobre el perro perezoso.

decoration-dashed

El veloz zorro marrón salta sobre el perro perezoso.

decoration-wavy

El veloz zorro marrón salta sobre el perro perezoso.

<p class="underline decoration-solid">El veloz zorro marrón...</p><p class="underline decoration-double">El veloz zorro marrón...</p><p class="underline decoration-dotted">El veloz zorro marrón...</p><p class="underline decoration-dashed">El veloz zorro marrón...</p><p class="underline decoration-wavy">El veloz zorro marrón...</p>

Diseño responsivo

Antepone a la utilidad text-decoration-style 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-dashed ...">  Lorem ipsum dolor sit amet...</p>

Obtén más información sobre el uso de variantes en la documentación de variantes.

Copyright © 2026 Tailwind Labs Inc.·Política de marcas registradas