// tipografía · tamaño, peso, leading, tracking
Escala de tamaños, pesos, interlineado, espaciado y transformaciones de texto. Todo sin CSS.
Escala de tamaños
text-xs 12px — texto pequeño
text-sm 14px — texto secundario
text-base 16px — cuerpo
text-lg 18px — lead
text-xl 20px
text-2xl 24px
text-4xl 36px
text-6xl 60px
Font weight
font-thin · Texto de prueba
font-light · Texto de prueba
font-normal · Texto de prueba
font-medium · Texto de prueba
font-semibold · Texto de prueba
font-bold · Texto de prueba
font-extrabold · Texto de prueba
font-black · Texto de prueba
Leading (interlineado) + Tracking (espaciado)
leading-tight
Línea uno de texto. Línea dos de texto. Línea tres de texto largo.
leading-relaxed
Línea uno de texto. Línea dos de texto. Línea tres de texto largo.
tracking-tight
ABCDEFGHIJKLMNOP texto
tracking-widest
LABEL TÍTULO
Truncate · line-clamp
truncate (1 línea)
Este texto es muy largo y se truncará con puntos suspensivos al final cuando supere el ancho del contenedor padre
line-clamp-2
Este texto es muy largo y se truncará después de exactamente dos líneas de texto con puntos suspensivos al final cuando supere el límite establecido por la clase line-clamp-2 de Tailwind CSS
Transformaciones
uppercase · texto en mayúsculas
LOWERCASE · TEXTO EN MINÚSCULAS
capitalize · cada palabra con mayúscula
italic · texto en cursiva
underline decoration-cyan-400
line-through · texto tachado
<!-- Tamaño de texto -->
text-xs → 12px text-sm → 14px
text-base → 16px text-lg → 18px
text-xl → 20px text-2xl → 24px
text-4xl → 36px text-6xl → 60px
text-9xl → 128px
<!-- Font weight -->
font-thin → 100 font-light → 300
font-normal → 400 font-medium → 500
font-semibold → 600 font-bold → 700
font-extrabold → 800 font-black → 900
<!-- Leading (line-height) -->
leading-none → 1 leading-tight → 1.25
leading-snug → 1.375 leading-normal → 1.5
leading-relaxed → 1.625 leading-loose → 2
<!-- Tracking (letter-spacing) -->
tracking-tighter → -0.05em
tracking-tight → -0.025em
tracking-normal → 0
tracking-wide → 0.025em
tracking-wider → 0.05em
tracking-widest → 0.1em
<!-- Truncar texto -->
<p class="truncate"></p>
<p class="line-clamp-2"></p>
<p class="line-clamp-3"></p>
<!-- Transformaciones -->
<p class="uppercase"></p>
<p class="lowercase"></p>
<p class="capitalize"></p>
<p class="italic"></p>
<!-- Decoraciones -->
<p class="underline decoration-blue-400"></p>
<p class="underline decoration-wavy"></p>
<p class="line-through"></p>
<!-- Alineación -->
<p class="text-left"></p>
<p class="text-center"></p>
<p class="text-right"></p>