What is Letter spacing and tracking in Tailwind?

Tailwindmarkup~5 mins

Letter spacing and tracking in Tailwind

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Introduction

Letter spacing changes the space between letters to make text easier to read or to create a style.

You want to make a heading look more open and airy.

You need to tighten letters in a button to fit the text nicely.

You want to improve readability for small text on mobile screens.

You want to create a special style for a logo or brand name.

You want to adjust spacing for different languages or fonts.

Syntax

Tailwind

tracking-{size}

Example sizes: tracking-tighter, tracking-tight, tracking-normal, tracking-wide, tracking-wider, tracking-widest

Use tracking- followed by the size to control letter spacing.

Sizes go from tighter (less space) to widest (more space).

Examples

This makes letters closer together than normal.

Tailwind

<p class="tracking-tight">This text has tight letter spacing.</p>

This adds more space between letters for a relaxed look.

Tailwind

<p class="tracking-wide">This text has wide letter spacing.</p>

This uses the default spacing between letters.

Tailwind

<p class="tracking-normal">This text has normal letter spacing.</p>

Sample Program

This page shows three paragraphs with different letter spacing using Tailwind's tracking classes.

Tailwind

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Letter Spacing with Tailwind</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-6 font-sans">
  <h1 class="text-2xl font-bold tracking-widest mb-4">Tracking Widest</h1>
  <p class="tracking-tight mb-2">This text uses tracking-tight.</p>
  <p class="tracking-normal mb-2">This text uses tracking-normal.</p>
  <p class="tracking-wide mb-2">This text uses tracking-wide.</p>
</body>
</html>

OutputSuccess

Important Notes

Tailwind's tracking classes adjust the CSS letter-spacing property.

Use spacing carefully to keep text readable and visually balanced.

Try viewing your text on different screen sizes to check spacing looks good everywhere.

Summary

Letter spacing controls space between letters to improve style and readability.

Tailwind uses tracking- classes like tracking-tight or tracking-wide.

Use these classes on text elements to quickly adjust spacing without writing custom CSS.