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.

Practice

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