Tailwind CSS Letter Spacing (Tracking) Tutorial

Letter spacing (also called tracking) controls the horizontal space between characters.

Proper letter spacing improves:

Readability
Design aesthetics
Heading clarity
Professional typography

In traditional CSS, you write:

letter-spacing: 0.05em;

In Tailwind CSS, you simply write:

class="tracking-wide"

Simple and clean.

Let’s understand everything step by step.

What is Letter Spacing?

Letter spacing controls how tightly or loosely characters are spaced.

Example:

Normal text: The quick brown fox

Wide spacing: T h e q u i c k b r o w n f o x

Tight spacing: Thequickbrownfox

Small spacing adjustments can dramatically improve design quality.

Default Tracking Classes in Tailwind

Tailwind provides these utilities:

Class	Effect
tracking-tighter	Extra tight spacing
tracking-tight	Slightly tight spacing
tracking-normal	Default spacing
tracking-wide	Slightly wide spacing
tracking-wider	More spacing
tracking-widest	Maximum spacing

Basic Example

<p class="tracking-tight">
  The quick brown fox jumps over the lazy dog.
</p>

<p class="tracking-normal">
  The quick brown fox jumps over the lazy dog.
</p>

<p class="tracking-wide">
  The quick brown fox jumps over the lazy dog.
</p>

You’ll notice:

tracking-tight → letters are closer
tracking-wide → letters have more breathing room

When Should You Use Letter Spacing?

Use tighter spacing for:

Large headings
Bold display text

Use wider spacing for:

Buttons
Labels
Navigation links
Small uppercase text

Example:

<button class="uppercase tracking-widest">
  Subscribe
</button>

This creates a premium look.

Using Negative Letter Spacing

You can reduce spacing using negative tracking.

If your theme supports numeric scale:

@theme {
  --tracking-1: 0em;
  --tracking-2: 0.025em;
  --tracking-3: 0.05em;
}

Then you can use:

<p class="-tracking-2">
  The quick brown fox
</p>

This pulls letters slightly closer together.

Negative tracking is useful for:

Large bold headings
Tight hero text

Using Custom Letter Spacing

If you need a specific value:

<p class="tracking-[.25em]">
  Custom letter spacing example.
</p>

You can also use CSS variables:

<p class="tracking-(--my-tracking)">
  Custom tracking using CSS variable.
</p>

This is helpful in advanced design systems.

Responsive Letter Spacing

You can change spacing based on screen size.

Example:

<p class="tracking-tight md:tracking-wide">
  This text changes spacing on larger screens.
</p>

Meaning:

Mobile → tighter
Desktop → wider

Very useful for hero sections.

Complete Working Example (Full Demo Page)

Copy and test this example:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Tailwind Letter Spacing Example</title>
  <script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>
<body class="bg-gray-100 p-10">

  <div class="max-w-3xl mx-auto bg-white p-8 rounded-lg shadow-lg">

    <h1 class="text-4xl font-bold text-center mb-8 tracking-tight">
      Tailwind CSS Letter Spacing Demo
    </h1>

    <!-- Tight -->
    <div class="mb-6">
      <h2 class="text-xl font-semibold mb-2">Tight Spacing</h2>
      <p class="tracking-tight text-gray-700">
        The quick brown fox jumps over the lazy dog.
      </p>
    </div>

    <!-- Normal -->
    <div class="mb-6">
      <h2 class="text-xl font-semibold mb-2">Normal Spacing</h2>
      <p class="tracking-normal text-gray-700">
        The quick brown fox jumps over the lazy dog.
      </p>
    </div>

    <!-- Wide -->
    <div class="mb-6">
      <h2 class="text-xl font-semibold mb-2">Wide Spacing</h2>
      <p class="tracking-wide text-gray-700">
        The quick brown fox jumps over the lazy dog.
      </p>
    </div>

    <!-- Widest -->
    <div class="mb-6">
      <h2 class="text-xl font-semibold mb-2">Widest Spacing</h2>
      <p class="tracking-widest uppercase text-gray-700">
        The quick brown fox jumps over the lazy dog.
      </p>
    </div>

    <!-- Custom -->
    <div class="mb-6">
      <h2 class="text-xl font-semibold mb-2">Custom Value</h2>
      <p class="tracking-[0.25em] text-gray-700">
        Custom tracking using arbitrary value.
      </p>
    </div>

    <!-- Responsive -->
    <div>
      <h2 class="text-xl font-semibold mb-2">Responsive Tracking</h2>
      <p class="tracking-tight md:tracking-widest text-gray-700">
        Tighter on mobile, wider on larger screens.
      </p>
    </div>

  </div>

</body>
</html>

This demo shows:

Tight spacing
Normal spacing
Wide spacing
Widest spacing
Custom value
Responsive tracking
Professional layout

Best Practices for Letter Spacing

For body text:

Use tracking-normal

For headings:

Use tracking-tight

For uppercase buttons or navigation:

Use tracking-wide or tracking-widest

Avoid excessive spacing for long paragraphs — it reduces readability.

Small adjustments create professional typography.

Common Questions

What is the default letter spacing?

tracking-normal

How do I increase letter spacing in Tailwind?

class="tracking-wide"

How do I use custom spacing?

class="tracking-[0.2em]"

How do I make tracking responsive?

class="tracking-tight md:tracking-wide"

0 likes

Your Feedback

Help us improve by sharing your thoughts

Previous: Tailwind CSS Line Height (Leading) Tutorial – Complete Beginner Guide with Examples

Next: Tailwind CSS Text Transform Tutorial – Uppercase, Lowercase & Capitalize Guide

At Online Learner, we're on a mission to ignite a passion for learning and empower individuals to reach their full potential. Founded by a team of dedicated educators and industry experts, our platform is designed to provide accessible and engaging educational resources for learners of all ages and backgrounds.

Terms Disclaimer About Us Contact Us