Tipografía
Utilidades para controlar el tracking, o espaciado entre letras, de un elemento.
| Clase | Estilos |
|---|---|
tracking-tighter | letter-spacing: var(--tracking-tighter); /* -0.05em */ |
tracking-tight | letter-spacing: var(--tracking-tight); /* -0.025em */ |
tracking-normal | letter-spacing: var(--tracking-normal); /* 0em */ |
tracking-wide | letter-spacing: var(--tracking-wide); /* 0.025em */ |
tracking-wider | letter-spacing: var(--tracking-wider); /* 0.05em */ |
tracking-widest | letter-spacing: var(--tracking-widest); /* 0.1em */ |
tracking-(<custom-property>) | letter-spacing: var(<custom-property>); |
tracking-[<value>] | letter-spacing: <value>; |
Usa utilidades como tracking-tight y tracking-wide para establecer el espaciado entre letras de un elemento:
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
<p class="tracking-tight ...">The quick brown fox ...</p><p class="tracking-normal ...">The quick brown fox ...</p><p class="tracking-wide ...">The quick brown fox ...</p>Usar valores negativos no tiene mucho sentido con la escala de espaciado de letras con nombre que Tailwind incluye por defecto, pero si personalizaste tu escala para usar números, puede ser útil:
@theme { --tracking-1: 0em; --tracking-2: 0.025em; --tracking-3: 0.05em; --tracking-4: 0.1em;}Para usar un valor de espaciado de letras negativo, agrega un prefijo de guión al nombre de la clase para convertirlo en un valor negativo:
<p class="-tracking-2">The quick brown fox ...</p>Usa la sintaxis tracking-[<value>] para establecer el letter spacing basado en un valor completamente personalizado:
<p class="tracking-[.25em] ..."> Lorem ipsum dolor sit amet...</p>Para variables CSS, también puedes usar la sintaxis tracking-(<custom-property>) :
<p class="tracking-(--my-tracking) ..."> Lorem ipsum dolor sit amet...</p>Esto es solo un atajo para tracking-[var(<custom-property>)] que agrega la función var() por ti automáticamente.
Prefija una utilidad letter-spacing con una variante de breakpoint como md: para aplicar la utilidad solo en tamaños de pantalla medium y superiores:
<p class="tracking-tight md:tracking-wide ..."> 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 --tracking-* para personalizar las utilidades letter spacing en tu proyecto:
@theme { --tracking-tightest: -0.075em; }Ahora la utilidad tracking-tightest puede ser usada en tu marcado:
<p class="tracking-tightest"> Lorem ipsum dolor sit amet...</p>Aprende más sobre la personalización de tu tema en la documentación del tema.