Esta clase acepta mucho valor en Tailwind CSS en el que todas las propiedades están cubiertas como en forma de clase. Es la alternativa a la propiedad de espaciado entre letras de CSS . Esta clase se utiliza para establecer el comportamiento de espaciado entre caracteres de texto, es decir, aumentar o disminuir el espacio entre caracteres en un texto.
Clases de espaciado entre letras:
- tracking-tighter: el espaciado de letras más ajustado para el espacio cero entre caracteres, el valor será -0.05em.
- tracking-tight: El espaciado entre letras de tracking-tight para el pequeño espacio entre caracteres, el valor será -0.025em.
- tracking-normal: El espaciado entre letras de seguimiento normal para la fuente actual, es decir, sin espacio extra entre caracteres. Este es el valor predeterminado.
- tracking-wide: El espaciado de letras de todo el seguimiento para un poco más de espacio entre caracteres en comparación con lo normal, el valor será 0.025em.
- tracking-wider: el espaciado de letras más amplio de seguimiento para un poco más de espacio entre caracteres en comparación con el ancho, el valor será 0,05 em.
- tracking-widest: el espaciado de letras más ancho de seguimiento para un poco más de espacio entre caracteres en comparación con más ancho, el valor será 0.1em.
Sintaxis:
<element class="tracking-{size}">...</element>
Ejemplo:
HTML
<!DOCTYPE html> <head> <link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="text-center mx-4 space-y-2"> <h1 class="text-green-600 text-5xl font-bold"> GeeksforGeeks </h1> <b>Tailwind CSS Letter Spacing Class</b> <div class="mx-24 bg-green-200 text-justify"> <p class="p-2">tracking-tighter:<br> <span class="tracking-tighter"> A Computer Science portal for Geeks </span> </p> <p class="p-2">tracking-tight:<br> <span class="tracking-tight"> A Computer Science portal for Geeks </span> </p> <p class="p-2">tracking-normal:<br> <span class="tracking-normal"> A Computer Science portal for Geeks </span> </p> <p class="p-2">tracking-wide:<br> <span class="tracking-wide"> A Computer Science portal for Geeks </span> </p> <p class="p-2">tracking-wider:<br> <span class="tracking-wider"> A Computer Science portal for Geeks </span> </p> <p class="p-2">tracking-widest:<br> <span class="tracking-widest"> A Computer Science portal for Geeks </span> </p> </div> </body> </html>
Producción:
clases de tamaño de seguimiento
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA