Tailwind CSS - Letter Spacing

Previous
Quiz
Next

Tailwind CSS Letter Spacing is a predefined class used to easily adjust the spacing between characters within text elements on a webpage.

Tailwind CSS Letter Spacing Classes

Below is a list of Tailwind CSS Letter Spacing classes that specify different letter spacing styles to adjust the spacing between characters in text.

Class Properties
tracking-tighter letter-spacing: -0.05em;
tracking-tight letter-spacing: -0.025em;
tracking-normal letter-spacing: 0em;
tracking-wide letter-spacing: 0.025em;
tracking-wider letter-spacing: 0.05em;
tracking-widest letter-spacing: 0.1em;

Functionality Of Tailwind CSS Letter Spacing Classes

  • tracking-tighter: This class reduces the spacing between letters by -0.05 em.
  • tracking-tight: This class reduces the spacing between letters by -0.025 em.
  • tracking-normal: This class sets letter spacing to the default value (0 em).
  • tracking-wide: This class increases the spacing between letters by 0.05 em.
  • tracking-wider: This class increases the spacing between letters by 0.1 em.
  • tracking-widest: This class increases the spacing between letters by 0.2 em.

Tailwind CSS Letter Spacing Class Examples

Below are examples of Tailwind CSS letter spacing classes, which allow you to control the spacing between characters in text for different visual effects and readability enhancements.

Setting Letter Spacing

This example shows how Tailwind CSS Letter Spacing classes can be applied to adjust the spacing between characters in the text, creating different visual effects.

Example

<!DOCTYPE html>
<html lang="en">
<head> 
     <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h1 class="text-2xl font-bold mb-4">
        Tailwind CSS Letter Spacing
    </h1>  
    <p class="underline">Applying tracking-tighter</p> 
    <p class="tracking-tighter mb-4">
        This is tracking-tighter in Tailwind CSS
    </p>
    <p class="underline">Applying tracking-tight</p> 
    <p class="tracking-tight mb-4">
        This is tracking-tight in Tailwind CSS
    </p>
    <p class="underline">Applying tracking-normal</p> 
    <p class="tracking-normal mb-4">
        This is tracking-normal in Tailwind CSS
    </p>
    <p class="underline">Applying tracking-wide</p> 
    <p class="tracking-wide mb-4">
        This is tracking-wide in Tailwind CSS
    </p>
    <p class="underline">Applying tracking-wider</p> 
    <p class="tracking-wider mb-4">
        This is tracking-wider in Tailwind CSS
    </p>
    <p class="underline">Applying tracking-widest</p> 
    <p class="tracking-widest mb-4">
        This is tracking-widest in Tailwind CSS
    </p>
</body>

</html>

Setting Negative Letter Spacing

In the following example, we will apply the negative letter spacing, you just need to add a negative (-) before the class. This negative value does not make any sense with letter spacing. But if you have opted to customize your letter-spacing scale to use numbers instead of descriptive words like "wide" the negative value modifier can be useful.

Example

<!DOCTYPE html>
<html lang="en">
<head> 
     <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h1 class="text-2xl font-bold mb-4">
        Tailwind CSS Letter Spacing
    </h1>  
    <p class="underline">Applying tracking-2</p> 
    <p class="tracking-2 mb-4">
       This a textual content with tracking-2 Class
    </p>
    <p class="underline">Applying -tracking-2</p> 
    <p class="-tracking-2 mb-4">
       This a textual content with tracking-2 Class
    </p>
</body>

</html>
Print Page
Previous
Next