Tipografía
Utilidades para controlar el interlineado o la altura de línea de un elemento.
| Clase | Estilos |
|---|---|
text-<size>/<number> | font-size: <size>;
line-height: calc(var(--spacing) * <number>); |
text-<size>/(<custom-property>) | font-size: <size>;
line-height: var(<custom-property>); |
text-<size>/[<value>] | font-size: <size>;
line-height: <value>; |
leading-none | line-height: 1; |
leading-<number> | line-height: calc(var(--spacing) * <number>); |
leading-(<custom-property>) | line-height: var(<custom-property>); |
leading-[<value>] | line-height: <value>; |
Utiliza utilidades de tamaño de fuente como text-sm/6 and 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 voy a 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, en ese momento, yo era un biólogo marino.
Así que empecé a caminar hacia el agua. No les voy a 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, en ese momento, yo era un biólogo marino.
Así que empecé a caminar hacia el agua. No les voy a 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, en ese momento, yo era un biólogo marino.
<p class="text-base/6 ...">Así que empecé a caminar hacia el agua...</p><p class="text-base/7 ...">Así que empecé a caminar hacia el agua...</p><p class="text-base/8 ...">Así que empecé a caminar hacia el agua...</p>Cada utilidad de tamaño de fuente también establece una altura de línea por defecto cuando no se proporciona una. Puedes obtener más información sobre estos valores y cómo personalizarlos en la documentación de font-size.
Utiliza utilidades leading-<number> como leading-6 y leading-7 para establecer la altura de línea de un elemento de forma independiente del tamaño de fuente:
Así que empecé a caminar hacia el agua. No les voy a 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, en ese momento, yo era un biólogo marino.
Así que empecé a caminar hacia el agua. No les voy a 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, en ese momento, yo era un biólogo marino.
Así que empecé a caminar hacia el agua. No les voy a 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, en ese momento, yo era un biólogo marino.
<p class="text-sm leading-6">Así que empecé a caminar hacia el agua...</p><p class="text-sm leading-7">Así que empecé a caminar hacia el agua...</p><p class="text-sm leading-8">Así que empecé a caminar hacia el agua...</p>Utiliza la utilidad leading-none para establecer la altura de línea de un elemento igual a su tamaño de fuente:
El veloz zorro marrón salta sobre el perro perezoso.
<p class="text-2xl leading-none ...">El veloz zorro marrón...</p>Usa la sintaxis leading-[<value>] para establecer el/la altura de línea basándose en un valor completamente personalizado:
<p class="leading-[1.5] ..."> Lorem ipsum dolor sit amet...</p>Para variables CSS, también puedes usar la sintaxis leading-(<custom-property>) :
<p class="leading-(--my-line-height) ..."> Lorem ipsum dolor sit amet...</p>Esto es solo un atajo para leading-[var(<custom-property>)] que añade la función var() por ti automáticamente.
Antepone a la utilidad line-height 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="leading-5 md:leading-6 ..."> Lorem ipsum dolor sit amet...</p>Obtén más información sobre el uso de variantes en la documentación de variantes.
Las utilidades leading-<number> se basan en la variable de tema --spacing, la cual se puede personalizar en tu propio tema:
@theme { --spacing: 1px; }Obtén más información sobre cómo personalizar la escala de espaciado en la documentación de variables de tema.