Bird
Raised Fist0
Tailwindmarkup~5 mins

Letter spacing and tracking in Tailwind

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
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.

Practice

(1/5)
1. What does the Tailwind CSS class tracking-wide do to text?
easy
A. Increases the space between letters
B. Decreases the space between letters
C. Changes the font size
D. Makes the text bold

Solution

  1. Step 1: Understand the meaning of tracking in CSS

    Tracking controls the space between letters in text.

  2. Step 2: Identify what tracking-wide does

    The class tracking-wide increases letter spacing, making letters more spread out.

  3. Final Answer:

    Increases the space between letters -> Option A

  4. Quick Check:

    tracking-wide = more letter space [OK]
Hint: Tracking classes adjust letter spacing; wide means more space [OK]
Common Mistakes:
  • Confusing tracking with font size
  • Thinking tracking-tight increases spacing
  • Assuming tracking changes font weight
2. Which of the following is the correct Tailwind class to reduce letter spacing?
easy
A. tracking-tight
B. tracking-loose
C. tracking-wide
D. tracking-normal

Solution

  1. Step 1: Recall Tailwind tracking classes

    Classes like tracking-tight reduce letter spacing, while tracking-wide increases it.

  2. Step 2: Identify the class that reduces spacing

    tracking-tight is the class that decreases space between letters.

  3. Final Answer:

    tracking-tight -> Option A

  4. Quick Check:

    tracking-tight = less letter space [OK]
Hint: Tight means less space between letters [OK]
Common Mistakes:
  • Choosing tracking-wide to reduce spacing
  • Confusing tracking-normal as reducing spacing
  • Using tracking-loose which increases spacing
3. What will be the visual effect of this HTML snippet?
<p class="tracking-widest">Hello</p>
medium
A. Text will be bold and large
B. Letters in 'Hello' will be very close together
C. Letters in 'Hello' will have the widest spacing
D. Text color will change to gray

Solution

  1. Step 1: Understand the class tracking-widest

    This class applies the largest letter spacing available in Tailwind.

  2. Step 2: Predict the visual effect on the text

    The letters in 'Hello' will be spaced very far apart horizontally.

  3. Final Answer:

    Letters in 'Hello' will have the widest spacing -> Option C

  4. Quick Check:

    tracking-widest = maximum letter spacing [OK]
Hint: Widest means maximum letter spacing [OK]
Common Mistakes:
  • Thinking it changes font weight or color
  • Assuming letters get closer
  • Confusing tracking-widest with tracking-tight
4. Identify the error in this Tailwind usage:
<h1 class="tracking-tightest">Title</h1>
medium
A. Class should be tracking-tight instead
B. No error, it is valid Tailwind syntax
C. Class should be tracking-widest
D. Class tracking-tightest does not exist in Tailwind

Solution

  1. Step 1: Check Tailwind letter spacing classes

    Tailwind provides classes like tracking-tight, but tracking-tightest is not a valid class.

  2. Step 2: Confirm the correct class to reduce spacing

    The correct class to reduce letter spacing is tracking-tight, not tracking-tightest.

  3. Final Answer:

    Class tracking-tightest does not exist in Tailwind -> Option D

  4. Quick Check:

    Invalid class name = error [OK]
Hint: Check Tailwind docs for exact class names [OK]
Common Mistakes:
  • Assuming 'tightest' is a valid modifier
  • Using non-existent classes without error
  • Confusing tracking-tight with tracking-tightest
5. You want to style a paragraph so that its letters have slightly more space than normal but less than tracking-wide. Which Tailwind class should you use?
hard
A. tracking-normal
B. tracking-[0.01em]
C. tracking-wide
D. tracking-tight

Solution

  1. Step 1: Understand default and preset tracking classes

    Tailwind has preset classes like tracking-normal, tracking-wide, and tracking-tight with fixed spacing values.

  2. Step 2: Use custom tracking value for in-between spacing

    To get spacing between normal and wide, use arbitrary value syntax like tracking-[0.01em] to specify exact letter spacing.

  3. Final Answer:

    tracking-[0.01em] -> Option B

  4. Quick Check:

    Arbitrary tracking value = custom spacing [OK]
Hint: Use arbitrary values for custom letter spacing [OK]
Common Mistakes:
  • Choosing tracking-normal which is default spacing
  • Picking tracking-wide which is too wide
  • Not knowing about arbitrary value syntax