Letter spacing and tracking in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add normal letter spacing to the text.

Tailwind

<p class="[1]">Hello, friend!</p>

Drag options to blanks, or click blank then click option'

Atracking-wide

Btracking-widest

Ctracking-tight

Dtracking-normal

Attempts:

3 left

💡 Hint

Common Mistakes

Using tracking-wide or tracking-tight which changes spacing.

Forgetting the tracking- prefix.

The class tracking-normal sets the letter spacing to the default normal spacing.

2fill in blank

medium

Complete the code to increase letter spacing slightly.

Tailwind

<h2 class="text-xl [1]">Welcome!</h2>

Drag options to blanks, or click blank then click option'

Atracking-normal

Btracking-widest

Ctracking-wide

Dtracking-tight

Attempts:

3 left

💡 Hint

Common Mistakes

Using tracking-tight which decreases spacing.

Using tracking-normal which keeps default spacing.

The class tracking-wide increases the space between letters slightly.

3fill in blank

hard

Fix the error in the class to apply the widest letter spacing.

Tailwind

<span class="[1]">Big space</span>

Drag options to blanks, or click blank then click option'

Atracking-widest

Btracking-wideest

Ctracking-widestt

Dtracking-widee

Attempts:

3 left

💡 Hint

Common Mistakes

Misspelling the class name.

Adding extra letters at the end.

The correct Tailwind class for the widest letter spacing is tracking-widest.

4fill in blank

hard

Fill both blanks to create a paragraph with medium text size and tight letter spacing.

Tailwind

<p class="[1] [2]">Tight letters here.</p>

Drag options to blanks, or click blank then click option'

Atext-base

Btracking-tight

Ctext-lg

Dtracking-wide

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up letter spacing classes.

Using too large or too small text size classes.

text-base sets a medium font size, and tracking-tight reduces the space between letters.

5fill in blank

hard

Fill all three blanks to create a heading with extra large text, widest letter spacing, and bold font weight.

Tailwind

<h1 class="[1] [2] [3]">Big and bold!</h1>

Drag options to blanks, or click blank then click option'

Afont-bold

Btracking-widest

Ctext-4xl

Dfont-light

Attempts:

3 left

💡 Hint

Common Mistakes

Using font-light instead of bold.

Mixing up order of classes (order doesn't affect but clarity helps).

text-4xl makes the text extra large, tracking-widest adds the widest letter spacing, and font-bold makes the text bold.