Tailwind CSS Letter Spacing

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>
<html>

<head>
    <link href="https://unpkg.com/tailwindcss@1.9.6/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:

Tailwind CSS Letter Spacing

Explore