Tipografía
Utilidades para controlar el tracking (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>; |
Utiliza utilidades como tracking-tight y tracking-wide para establecer el espaciado entre letras 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.
<p class="tracking-tight ...">El veloz zorro marrón salta ...</p><p class="tracking-normal ...">El veloz zorro marrón salta ...</p><p class="tracking-wide ...">El veloz zorro marrón salta ...</p>El uso de valores negativos no tiene mucho sentido con la escala con nombre para el espaciado entre letras que Tailwind incluye por defecto, pero si has personalizado 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 entre letras negativo, antepón un guion al nombre de la clase para convertirlo en un valor negativo:
<p class="-tracking-2">El veloz zorro marrón salta ...</p>Usa la sintaxis tracking-[<value>] para establecer el/la el espaciado entre letras basándose 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 añade la función var() por ti automáticamente.
Antepone a la utilidad letter-spacing 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="tracking-tight md:tracking-wide ..."> 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 --tracking-* para personalizar las utilidades de el espaciado entre letras en tu proyecto:
@theme { --tracking-tightest: -0.075em; }Ahora se puede usar la utilidad tracking-tightest en tu marcado:
<p class="tracking-tightest"> Lorem ipsum dolor sit amet...</p>Obtén más información sobre cómo personalizar tu tema en la documentación del tema.