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.
|
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. |
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.
|
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
|
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
|
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. |
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
|
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%
|
text-align
Valor | Texto normal | Texto con la propiedad |
---|---|---|
left (por defecto)text-left |
Texto alineado a la izquierda
|
Texto alineado a la izquierda
|
centertext-center |
Texto centrado
|
Texto centrado
|
righttext-right |
Texto alineado a la derecha
|
Texto alineado a la derecha
|
justifytext-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!
|
starttext-start |
Texto alineado al inicio del flujo
|
Texto alineado al inicio del flujo
|
endtext-end |
Texto alineado al final del flujo
|
Texto alineado al final del flujo
|
starttext-start (idioma RTL) |
هذا النص محاذى إلى بداية الاتجاه
|
هذا النص محاذى إلى بداية الاتجاه
|
endtext-end (idioma RTL) |
هذا النص محاذى إلى نهاية الاتجاه
|
هذا النص محاذى إلى نهاية الاتجاه
|
hyphens
Clase Tailwind | CSS equivalente | Texto ingresado | Texto final |
---|---|---|---|
hyphens-none | hyphens: none; |
Anticonstitucionalmente es una palabra extremadamente
larga sin cortes.
|
Anticonstitucionalmente es una palabra extremadamente larga
sin cortes.
|
hyphens-auto | hyphens: auto; |
Anticonstitucionalmente es una palabra extremadamente
larga sin cortes.
|
Anticonstitucionalmente es una palabra extremadamente larga
sin cortes.
|
hyphens-manual | hyphens: manual; |
Anticonstitucionalmente es una palabra extremadamente
larga con guiones manuales.
|
Anticonstitucionalmente 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 |