Tipografía
Utilidades para controlar el leading, o 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>; |
Usa utilidades de tamaño de fuente 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:
So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I was a marine biologist.
So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I was a marine biologist.
So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I was a marine biologist.
<p class="text-base/6 ...">So I started to walk into the water...</p><p class="text-base/7 ...">So I started to walk into the water...</p><p class="text-base/8 ...">So I started to walk into the water...</p>Cada utilidad de tamaño de fuente también establece una altura de línea predeterminada 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.
Usa utilidades leading-<number> como leading-6 y leading-7 para establecer la altura de línea de un elemento independientemente del tamaño de fuente:
So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I was a marine biologist.
So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I was a marine biologist.
So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I was a marine biologist.
<p class="text-sm leading-6">So I started to walk into the water...</p><p class="text-sm leading-7">So I started to walk into the water...</p><p class="text-sm leading-8">So I started to walk into the water...</p>Usa la utilidad leading-none para establecer la altura de línea de un elemento igual a su tamaño de fuente:
The quick brown fox jumps over the lazy dog.
<p class="text-2xl leading-none ...">The quick brown fox...</p>Usa la sintaxis leading-[<value>] para establecer el line height basado 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 agrega la función var() por ti automáticamente.
Prefija una utilidad line-height con una variante de breakpoint como md: para aplicar la utilidad solo en tamaños de pantalla medium y superiores:
<p class="leading-5 md:leading-6 ..."> Lorem ipsum dolor sit amet...</p>Aprende más sobre el uso de variantes en la documentación de variantes.
Las utilidades leading-<number> son impulsadas por la variable de tema --spacing, la cual puede ser personalizada en tu propio tema:
@theme { --spacing: 1px; }Aprende más sobre la personalización de la escala de espaciado en la documentación de variables de tema.