Tipografía
Utilidades para controlar el tamaño de fuente (font-size) 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 veloz zorro marrón salta sobre el perro perezoso.
El veloz zorro marrón salta sobre el perro perezoso.
El veloz zorro marrón salta sobre el perro perezoso.
El veloz zorro marrón salta sobre el perro perezoso.
El veloz zorro marrón salta sobre el perro perezoso.
<p class="text-sm ...">El veloz zorro marrón ...</p><p class="text-base ...">El veloz zorro marrón ...</p><p class="text-lg ...">El veloz zorro marrón ...</p><p class="text-xl ...">El veloz zorro marrón ...</p><p class="text-2xl ...">El veloz zorro marrón ...</p>Utiliza utilidades como text-sm/6 y text-lg/7 para establecer el tamaño de fuente y la altura de línea de un elemento al mismo tiempo:
Así que empecé a caminar hacia el agua. No les mentiré muchachos, estaba aterrorizado. Pero seguí adelante, y a medida que avanzaba más allá de las olas, una extraña calma se apoderó de mí. No sé si fue intervención divina o la afinidad de todos los seres vivos, pero te digo Jerry que en ese momento, yo era un biólogo marino.
Así que empecé a caminar hacia el agua. No les mentiré muchachos, estaba aterrorizado. Pero seguí adelante, y a medida que avanzaba más allá de las olas, una extraña calma se apoderó de mí. No sé si fue intervención divina o la afinidad de todos los seres vivos, pero te digo Jerry que en ese momento, yo era un biólogo marino.
Así que empecé a caminar hacia el agua. No les mentiré muchachos, estaba aterrorizado. Pero seguí adelante, y a medida que avanzaba más allá de las olas, una extraña calma se apoderó de mí. No sé si fue intervención divina o la afinidad de todos los seres vivos, pero te digo Jerry que en ese momento, yo 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/la tamaño de fuente basándose 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 añade la función var() por ti automáticamente.
Antepone a la utilidad font-size el prefijo de una variante de punto de ruptura como md: para aplicar la utilidad únicamente en tamaños de pantalla mediano y superiores:
<p class="text-sm md:text-base ..."> Lorem ipsum dolor sit amet...</p>Obtén más información sobre el uso de variantes en la documentación de variantes.
Usa las variables de tema --text-* para personalizar las utilidades de tamaño de fuente en tu proyecto:
@theme { --text-tiny: 0.625rem; }Ahora se puede usar la utilidad text-tiny 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; }Obtén más información sobre cómo personalizar tu tema en la documentación del tema.