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"


IT and Digital Marketing
keyboard_arrow_left Previous: Tailwind CSS Line Height (Leading) Tutorial – Complete Beginner Guide with Examples
Next: Tailwind CSS Text Transform Tutorial – Uppercase, Lowercase & Capitalize Guide keyboard_arrow_right
Online Learner Logo

Online Learner helps developers master programming, database concepts, interview preparation, and real-world implementation through structured learning paths.

Quick Links

Company

© 2023 - 2026 OnlineLearner.in | All Rights Reserved.

logo
Frontend
Backend
Interviews