Clases de Texto en Tailwind CSS

🧵 Overflow y truncamiento de texto

Clase Tailwind CSS equivalente Texto ingresado Texto final
truncate overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
Este es un texto muy largo que debería ser truncado con puntos suspensivos.
Este es un texto muy largo que debería ser truncado con puntos suspensivos.
text-ellipsis text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
Este texto aplica solo ellipsis si se agregan overflow y nowrap.
Este texto aplica solo ellipsis si se agregan overflow y nowrap.
text-clip text-overflow: clip;
overflow: hidden;
white-space: nowrap;
Texto cortado abruptamente sin puntos suspensivos. Este texto aplica solo si se agregan overflow y nowrap.
Texto cortado abruptamente sin puntos suspensivos. Este texto aplica solo si se agregan overflow y nowrap.
overflow-hidden overflow: hidden;
Texto más grande que el contenedor en altura y anchura.
Texto más grande que el contenedor en altura y anchura.

📌 Cortar párrafos con line-clamp

Estas clases permiten limitar el número de líneas visibles en un bloque de texto. Para que funcione correctamente, asegúrate de que el elemento tenga display: -webkit-box, overflow-hidden, y -webkit-box-orient: vertical mediante la utilidad line-clamp.

Clase Tailwind CSS equivalente Resultado
line-clamp-1 display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;

Este es un ejemplo de párrafo largo que debería ser truncado después de una sola línea. De lo contrario, mostraría todo su contenido completo.

line-clamp-3 -webkit-line-clamp: 3;
... (mismo estilo base)

Este es un ejemplo de párrafo largo que debería ser truncado después de tres líneas. Permite mostrar un poco más de contenido antes de cortar con puntos suspensivos.

line-clamp-none -webkit-line-clamp: unset;
overflow: visible;

Este párrafo no se trunca, se muestra completo, sin importar cuántas líneas ocupe. Útil cuando se desea mostrar todo el texto sin restricciones.

line-clamp-[7] -webkit-line-clamp: 7;

Este es un párrafo con un valor personalizado. Puedes usar esta clase para controlar de forma precisa cuántas líneas deseas mostrar, por ejemplo, 7 líneas en este caso. Recuerda que la clase debe estar acompañada por el resto de las propiedades requeridas por el comportamiento de clamping para que funcione correctamente.

🔠 Espaciado y saltos con white-space

Clase Tailwind CSS equivalente Texto ingresado Texto final
whitespace-normal white-space: normal;
Este texto tiene saltos de línea y espacios extra.
Este texto tiene saltos de línea y espacios extra.
whitespace-nowrap white-space: nowrap;
Este texto tiene saltos de línea y espacios extra.
Este texto tiene saltos de línea y espacios extra.
whitespace-pre white-space: pre;
Este texto tiene saltos de línea y espacios extra.
Este texto tiene saltos de línea y espacios extra.
whitespace-pre-wrap white-space: pre-wrap;
Este texto tiene saltos de línea y espacios extra.
Este texto tiene saltos de línea y espacios extra.
whitespace-pre-line white-space: pre-line;
Este texto tiene saltos de línea y espacios extra.
Este texto tiene saltos de línea y espacios extra.

🧩 Comportamiento de ruptura de palabras

Clase Tailwind CSS equivalente Texto ingresado Texto final
break-words overflow-wrap: break-word;
TextoSinEspaciosExtremadamenteLargoQueNecesitaRomperse
TextoSinEspaciosExtremadamenteLargoQueNecesitaRomperse
break-all word-break: break-all;
TextoSinEspaciosExtremadamenteLargoQueNecesitaRomperse
TextoSinEspaciosExtremadamenteLargoQueNecesitaRomperse
break-keep word-break: keep-all;
Textosinespaciosquedeberíamantenersejuntoaunqueseamuylargo
Textosinespaciosquedeberíamantenersejuntoaunqueseamuylargo
break-normal overflow-wrap: normal;
word-break: normal;
TextoSinEspaciosExtremadamenteLargoQueNoDebeRomperse
TextoSinEspaciosExtremadamenteLargoQueNoDebeRomperse

🔡 Espaciado entre letras con tracking

Clase Tailwind CSS equivalente Texto de ejemplo Resultado
tracking-tighter letter-spacing: -0.05em; Texto más junto
Texto más junto
tracking-tight letter-spacing: -0.025em; Texto ligeramente junto
Texto ligeramente junto
tracking-normal letter-spacing: 0em; Texto con espaciado normal
Texto con espaciado normal
tracking-wide letter-spacing: 0.025em; Texto ligeramente separado
Texto ligeramente separado
tracking-wider letter-spacing: 0.05em; Texto más separado
Texto más separado
tracking-widest letter-spacing: 0.1em; Texto extremadamente separado
Texto extremadamente separado
tracking-[5px] letter-spacing: 5px; Espaciado personalizado
Espaciado personalizado

📏 Espaciado entre líneas con leading

Clase Tailwind CSS equivalente Texto de ejemplo Resultado
leading-none line-height: 1; Primera línea.
Segunda línea.
Tercera línea.
Primera línea.
Segunda línea.
Tercera línea.
leading-tight line-height: 1.25; Primera línea.
Segunda línea.
Tercera línea.
Primera línea.
Segunda línea.
Tercera línea.
leading-snug line-height: 1.375; Primera línea.
Segunda línea.
Tercera línea.
Primera línea.
Segunda línea.
Tercera línea.
leading-normal line-height: 1.5; Primera línea.
Segunda línea.
Tercera línea.
Primera línea.
Segunda línea.
Tercera línea.
leading-relaxed line-height: 1.625; Primera línea.
Segunda línea.
Tercera línea.
Primera línea.
Segunda línea.
Tercera línea.
leading-loose line-height: 2; Primera línea.
Segunda línea.
Tercera línea.
Primera línea.
Segunda línea.
Tercera línea.
leading-10 line-height: 2.5rem (40px); Primera línea.
Segunda línea.
Tercera línea.
Primera línea.
Segunda línea.
Tercera línea.
leading-[50px] line-height: 50px; Primera línea.
Segunda línea.
Tercera línea.
Primera línea.
Segunda línea.
Tercera línea.

🔠 Transformaciones de texto con text-transform

Clase Tailwind CSS equivalente Texto original Resultado
normal-case text-transform: none; Texto Sin Cambios
Texto Sin Cambios
capitalize text-transform: capitalize; texto transformado
texto transformado
uppercase text-transform: uppercase; texto transformado
texto transformado
lowercase text-transform: lowercase; TEXTO TRANSFORMADO
TEXTO TRANSFORMADO

🖋️ Decoración del texto con text-decoration

Clase Tailwind CSS equivalente Resultado
Line
no-underline text-decoration: none;
Texto sin decoración
underline text-decoration: underline;
Texto subrayado
line-through text-decoration: line-through;
Texto tachado
overline text-decoration: overline;
Texto con línea arriba
Style
underline decoration-solid text-decoration: underline; text-decoration-style: solid;
Subrayado sólido
underline decoration-dashed text-decoration-style: dashed;
Subrayado dashed
underline decoration-dotted text-decoration-style: dotted;
Subrayado dotted
underline decoration-double text-decoration-style: double;
Subrayado doble
underline decoration-wavy text-decoration-style: wavy;
Subrayado ondulado
Thickness
underline decoration-1 text-decoration-thickness: 1px;
Grosor 1
underline decoration-2 text-decoration-thickness: 2px;
Grosor 2
underline decoration-4 text-decoration-thickness: 4px;
Grosor 4
underline decoration-[6px] text-decoration-thickness: 6px;
Grosor personalizado
Color
underline decoration-red-500 text-decoration-color: #ef4444;
Rojo
underline decoration-blue-600 text-decoration-color: #2563eb;
Azul
underline decoration-yellow-400 text-decoration-color: #facc15;
Amarillo
underline decoration-[#00ffcc] text-decoration-color: #00ffcc;
Color personalizado
Opacity
underline decoration-green-500/30 text-decoration-color: rgba(34, 197, 94, 0.3);
Verde 30%
underline decoration-purple-600/60 text-decoration-color: rgba(147, 51, 234, 0.6);
Morado 60%
underline decoration-[#ff9900]/40 text-decoration-color: rgba(255, 153, 0, 0.4);
Custom 40%

📐 Sección: text-align

Valor Texto normal Texto con la propiedad
left (por defecto)
text-left
Texto alineado a la izquierda
Texto alineado a la izquierda
center
text-center
Texto centrado
Texto centrado
right
text-right
Texto alineado a la derecha
Texto alineado a la derecha
justify
text-justify
Texto justificado en ambos extremos, Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur eaque necessitatibus minima. Adipisci vitae numquam corrupti harum suscipit exercitationem velit earum laudantium dolor officia, provident voluptatem. Et distinctio nam ex!
Texto justificado en ambos extremos, Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur eaque necessitatibus minima. Adipisci vitae numquam corrupti harum suscipit exercitationem velit earum laudantium dolor officia, provident voluptatem. Et distinctio nam ex!
start
text-start
Texto alineado al inicio del flujo
Texto alineado al inicio del flujo
end
text-end
Texto alineado al final del flujo
Texto alineado al final del flujo
start
text-start
(idioma RTL)
هذا النص محاذى إلى بداية الاتجاه
هذا النص محاذى إلى بداية الاتجاه
end
text-end
(idioma RTL)
هذا النص محاذى إلى نهاية الاتجاه
هذا النص محاذى إلى نهاية الاتجاه

✂️ Clases de Corte de Palabras con hyphens

Clase Tailwind CSS equivalente Texto ingresado Texto final
hyphens-none hyphens: none;
Anti­constitu­cional­mente es una palabra extremadamente larga sin cortes.
Anti­constitu­cional­mente es una palabra extremadamente larga sin cortes.
hyphens-auto hyphens: auto;
Anti­constitu­cional­mente es una palabra extremadamente larga sin cortes.
Anti­constitu­cional­mente es una palabra extremadamente larga sin cortes.
hyphens-manual hyphens: manual;
Anti­constitu­cional­mente es una palabra extremadamente larga con guiones manuales.
Anti­constitu­cional­mente es una palabra extremadamente larga con guiones manuales.

Nota: Se debe hacer uso de guines blandos para dividir palabras largas en sílabas especificas. Por ejemplo, "Anticonstitucionalmente", puede dividirse en: Anti- constitu- cional- mente Siendo los guiones blandos representados con "­" La palabra se escribiría: Anti­constitu­cional­mente