Ajustando el espaciado entre letras y líneas

Curso de Tailwind CSS 1

Contenido del curso

Introducción, instalación y ambiente de desarrollo

Conceptos básicos

Utilerías

Proyecto: PlatziFood

Conclusiones

29
Conclusiones y qué sigue
00:54 min

Cursos Empresas Blog Live Conf Eventos Precios

0:004:37

Ajustando el espaciado entre letras y líneas

Curso de Tailwind CSS 1

Clase 10 de 29

Clase 10 / 29

Recursos

Controlar el espaciado entre letras, el interlineado, la alineación y la transformación de texto son habilidades fundamentales para lograr diseños tipográficos profesionales. Con unas pocas clases utilitarias de Tailwind CSS es posible ajustar cada uno de estos aspectos de forma rápida y visual, sin necesidad de escribir CSS personalizado.

¿Cómo controlar el espaciamiento entre letras con tracking?

El concepto de tracking se refiere al espaciamiento horizontal entre letras. En títulos con tipografía grande, suele ser conveniente reducir ese espacio para que el texto luzca más compacto y elegante.

Tailwind ofrece varias clases para esto [01:00]:

tracking-tight: reduce el espacio entre letras, ideal para encabezados.
tracking-tighter: comprime aún más la separación.
tracking-wide: aumenta el espacio entre caracteres.
tracking-widest: aplica la máxima separación disponible.

Elegir el valor correcto depende del tamaño de la fuente y del efecto visual que se busque. Un título grande generalmente se beneficia de tracking-tight, mientras que textos decorativos pueden usar tracking-wide.

¿Qué es leading y cómo ajusta el interlineado?

El leading define el espaciamiento vertical entre líneas de un párrafo. Un interlineado adecuado mejora la legibilidad y la jerarquía visual del contenido.

Las clases principales son [01:35]:

leading-tight: líneas muy cercanas entre sí.
leading-snug: un poco más de espacio que tight, pero aún compacto.
leading-loose: mayor separación, útil para párrafos largos.
leading-relaxed: separación moderada, menos pronunciada que loose.

Para preparar el ejemplo se utilizó un párrafo generado con lorem 40 y se aplicó la clase my-8 como margen vertical, que permite espaciar el bloque respecto a otros elementos de la página [00:30].

¿Cómo alinear, decorar y transformar texto con Tailwind?

¿Qué clases se usan para la alineación del texto?

Alinear el contenido es tan directo como añadir una clase al elemento [02:20]:

text-center: centra el texto.
text-right: lo lleva a la derecha.
text-justify: distribuye el texto de forma justificada.
text-left: alineación a la izquierda, que es el valor por defecto.

¿Cómo aplicar subrayado y tachado?

Tailwind incluye tres clases de decoración de texto [02:50]:

line-through: muestra el texto tachado.
underline: aplica un subrayado.
no-underline: elimina cualquier subrayado existente, útil cuando se necesita remover estilos heredados.

¿Cómo convertir entre mayúsculas, minúsculas y capitalización?

La transformación de texto permite modificar visualmente las letras sin cambiar el contenido HTML [03:15]:

uppercase: convierte todas las letras a mayúsculas.
capitalize: pone en mayúscula solo la primera letra de cada palabra.
lowercase: transforma todo el texto a minúsculas, incluso si en el código fuente está escrito en mayúsculas.

Estas clases son puramente visuales: el texto original en el DOM permanece sin cambios, lo que resulta práctico para mantener la accesibilidad y el SEO del contenido.

Con estas utilidades —tracking, leading, alineación, decoración y transformación— se obtiene un control tipográfico completo directamente desde el marcado, agilizando la maquetación sin salir del HTML. Si ya las probaste en tu proyecto, comparte qué combinaciones te funcionaron mejor.