Skip to content
Related Articles

Related Articles

Improve Article
Tailwind CSS Letter Spacing
  • Last Updated : 16 Feb, 2021

This class accepts lots of value in tailwind CSS in which all the properties are covered as in class form. It is the alternative to the CSS letter-spacing property. This class is used to set the spacing behavior between text characters i.e, increasing or decreasing the space between characters in a text.

Letter Spacing classes:

  • tracking-tighter: The tracking-tighter letter spacing for the zero space between characters, the value will be -0.05em.
  • tracking-tight: The tracking-tight letter spacing for the little space between characters, the value will be -0.025em.
  • tracking-normal: The tracking-normal letter spacing for the current font i.e no extra space between characters. This is the default value.
  • tracking-wide: The tracking-wide letter spacing for a little more space between characters compared to normal, the value will be 0.025em.
  • tracking-wider: The tracking-wider letter spacing for a little more space between characters compared to wide, the value will be  0.05em.
  • tracking-widest:  The tracking-widest letter spacing for a little more space between characters compared to wider, the value will be  0.1em.

Syntax:

<element class="tracking-{size}">...</element>

Example:

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

Output:

tracking size classes




My Personal Notes arrow_drop_up
Recommended Articles
Page :