Open In App
Related Articles

Tailwind CSS Letter Spacing

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

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



Last Updated : 23 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads