Espaciado de letras CSS de Tailwind

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *