Tailwind CSS Letter Spacing (Tracking) Tutorial

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

Benefits of Letter Spacing

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