Tipografía
Utilidades para controlar el tamaño de fuente de un elemento.
| Clase | Estilos |
|---|---|
text-xs | font-size: var(--text-xs); /* 0.75rem (12px) */
line-height: var(--text-xs--line-height); /* calc(1 / 0.75) */ |
text-sm | font-size: var(--text-sm); /* 0.875rem (14px) */
line-height: var(--text-sm--line-height); /* calc(1.25 / 0.875) */ |
text-base | font-size: var(--text-base); /* 1rem (16px) */
line-height: var(--text-base--line-height); /* calc(1.5 / 1) */ |
text-lg | font-size: var(--text-lg); /* 1.125rem (18px) */
line-height: var(--text-lg--line-height); /* calc(1.75 / 1.125) */ |
text-xl | font-size: var(--text-xl); /* 1.25rem (20px) */
line-height: var(--text-xl--line-height); /* calc(1.75 / 1.25) */ |
text-2xl | font-size: var(--text-2xl); /* 1.5rem (24px) */
line-height: var(--text-2xl--line-height); /* calc(2 / 1.5) */ |
text-3xl | font-size: var(--text-3xl); /* 1.875rem (30px) */
line-height: var(--text-3xl--line-height); /* calc(2.25 / 1.875) */ |
text-4xl | font-size: var(--text-4xl); /* 2.25rem (36px) */
line-height: var(--text-4xl--line-height); /* calc(2.5 / 2.25) */ |
text-5xl | font-size: var(--text-5xl); /* 3rem (48px) */
line-height: var(--text-5xl--line-height); /* 1 */ |
text-6xl | font-size: var(--text-6xl); /* 3.75rem (60px) */
line-height: var(--text-6xl--line-height); /* 1 */ |
text-7xl | font-size: var(--text-7xl); /* 4.5rem (72px) */
line-height: var(--text-7xl--line-height); /* 1 */ |
text-8xl | font-size: var(--text-8xl); /* 6rem (96px) */
line-height: var(--text-8xl--line-height); /* 1 */ |
text-9xl | font-size: var(--text-9xl); /* 8rem (128px) */
line-height: var(--text-9xl--line-height); /* 1 */ |
text-(length:<custom-property>) | font-size: var(<custom-property>); |
text-[<value>] | font-size: <value>; |
Utiliza utilidades como text-sm y text-lg para establecer el tamaño de fuente de un elemento:
El rápido zorro marrón salta sobre el perro perezoso.
El rápido zorro marrón salta sobre el perro perezoso.
El rápido zorro marrón salta sobre el perro perezoso.
El rápido zorro marrón salta sobre el perro perezoso.
El rápido zorro marrón salta sobre el perro perezoso.
<p class="text-sm ...">El rápido zorro marrón ...</p><p class="text-base ...">El rápido zorro marrón ...</p><p class="text-lg ...">El rápido zorro marrón ...</p><p class="text-xl ...">El rápido zorro marrón ...</p><p class="text-2xl ...">El rápido zorro marrón ...</p>Utiliza utilidades como text-sm/6 y text-lg/7 para establecer el tamaño de fuente y el interlineado de un elemento al mismo tiempo:
Así que empecé a caminar hacia el agua. No les mentiré chicos, estaba aterrorizado. Pero seguí adelante, y mientras pasaba las olas una extraña calma me invadió. No sé si fue intervención divina o la hermandad de todos los seres vivos, pero te digo Jerry en ese momento, era un biólogo marino.
Así que empecé a caminar hacia el agua. No les mentiré chicos, estaba aterrorizado. Pero seguí adelante, y mientras pasaba las olas una extraña calma me invadió. No sé si fue intervención divina o la hermandad de todos los seres vivos, pero te digo Jerry en ese momento, era un biólogo marino.
Así que empecé a caminar hacia el agua. No les mentiré chicos, estaba aterrorizado. Pero seguí adelante, y mientras pasaba las olas una extraña calma me invadió. No sé si fue intervención divina o la hermandad de todos los seres vivos, pero te digo Jerry en ese momento, era un biólogo marino.
<p class="text-sm/6 ...">Así que empecé a caminar hacia el agua...</p><p class="text-sm/7 ...">Así que empecé a caminar hacia el agua...</p><p class="text-sm/8 ...">Así que empecé a caminar hacia el agua...</p>Usa la sintaxis text-[<value>] para establecer el font size basado en un valor completamente personalizado:
<p class="text-[14px] ..."> Lorem ipsum dolor sit amet...</p>Para variables CSS, también puedes usar la sintaxis text-(length:<custom-property>) :
<p class="text-(length:--my-text-size) ..."> Lorem ipsum dolor sit amet...</p>Esto es solo un atajo para text-[length:var(<custom-property>)] que agrega la función var() por ti automáticamente.
Prefija una utilidad font-size con una variante de breakpoint como md: para aplicar la utilidad solo en tamaños de pantalla medium y superiores:
<p class="text-sm md:text-base ..."> Lorem ipsum dolor sit amet...</p>Aprende más sobre el uso de variantes en la documentación de variantes.
Usa las variables de tema --text-* para personalizar las utilidades font size en tu proyecto:
@theme { --text-tiny: 0.625rem; }Ahora la utilidad text-tiny puede ser usada en tu marcado:
<div class="text-tiny"> <!-- ... --></div>También puedes proporcionar valores predeterminados de line-height, letter-spacing y font-weight para un tamaño de fuente:
@theme { --text-tiny: 0.625rem; --text-tiny--line-height: 1.5rem; --text-tiny--letter-spacing: 0.125rem; --text-tiny--font-weight: 500; }Aprende más sobre la personalización de tu tema en la documentación del tema.