Tipografía
Utilidades para controlar la cantidad de espacio vacío mostrado antes del texto en un bloque.
| Clase | Estilos |
|---|---|
indent-<number> | text-indent: calc(var(--spacing) * <number>) |
-indent-<number> | text-indent: calc(var(--spacing) * -<number>) |
indent-px | text-indent: 1px; |
-indent-px | text-indent: -1px; |
indent-(<custom-property>) | text-indent: var(<custom-property>); |
indent-[<value>] | text-indent: <value>; |
Usa utilidades indent-<number> como indent-2 e indent-8 para establecer la cantidad de espacio vacío (sangría) que se muestra antes del texto en un bloque:
Así que empecé a caminar hacia el agua. No les mentiré chicos, estaba aterrado. Pero seguí adelante, y mientras pasaba las olas rompientes una extraña calma me invadió. No sé si fue intervención divina o la hermandad de todos los seres vivos, pero les digo Jerry en ese momento, era un biólogo marino.
<p class="indent-8">Así que empecé a caminar hacia el agua...</p>Para usar un valor de sangría de texto negativo, prefija el nombre de la clase con un guion para convertirlo en un valor negativo:
Así que empecé a caminar hacia el agua. No les mentiré chicos, estaba aterrado. Pero seguí adelante, y mientras pasaba las olas rompientes una extraña calma me invadió. No sé si fue intervención divina o la hermandad de todos los seres vivos, pero les digo Jerry en ese momento, era un biólogo marino.
<p class="-indent-8">Así que empecé a caminar hacia el agua...</p>Usa la sintaxis indent-[<value>] para establecer el text indentation basado en un valor completamente personalizado:
<p class="indent-[50%] ..."> Lorem ipsum dolor sit amet...</p>Para variables CSS, también puedes usar la sintaxis indent-(<custom-property>) :
<p class="indent-(--my-indentation) ..."> Lorem ipsum dolor sit amet...</p>Esto es solo un atajo para indent-[var(<custom-property>)] que agrega la función var() por ti automáticamente.
Prefija una utilidad text-indent con una variante de breakpoint como md: para aplicar la utilidad solo en tamaños de pantalla medium y superiores:
<p class="indent-4 md:indent-8 ..."> Lorem ipsum dolor sit amet...</p>Aprende más sobre el uso de variantes en la documentación de variantes.