Letter spacing and tracking in Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

📝 Syntax

intermediate

What is the effect of the Tailwind class tracking-wide?

Choose the correct description of what the tracking-wide class does to text in Tailwind CSS.

A Adds extra space between words, not letters.

B Decreases the space between letters, making text more compact.

C Changes the font weight to bold.

D Increases the space between letters slightly, making text more spread out.

💡 Hint

Think about what 'tracking' means in typography.

The tracking-wide class in Tailwind CSS increases the letter spacing, making the letters a bit more spaced out. It does not affect word spacing or font weight.

❓ rendering

intermediate

Which Tailwind class will make the letter spacing tighter than normal?

You want your text to have less space between letters than the default. Which Tailwind class should you use?

A tracking-wide

B tracking-widest

C tracking-tight

D tracking-normal

💡 Hint

Look for the class that suggests 'tight' spacing.

The tracking-tight class reduces the space between letters, making the text appear more compact.

🧠 Conceptual

advanced

What CSS property does Tailwind's tracking-widest class modify?

Identify the CSS property that the Tailwind class tracking-widest changes.

A letter-spacing

B word-spacing

C line-height

D font-size

💡 Hint

Tracking relates to spacing between letters.

The tracking-widest class sets a large positive value for the letter-spacing CSS property, increasing space between letters.

❓ selector

advanced

Which Tailwind class applies the smallest positive letter spacing?

Among these options, which Tailwind class applies the smallest positive increase in letter spacing?

A tracking-wide

B tracking-wider

C tracking-widest

D tracking-tight

💡 Hint

Check the order of spacing sizes in Tailwind documentation.

tracking-wide applies a small positive letter spacing, smaller than tracking-wider and tracking-widest. tracking-tight reduces spacing.

❓ accessibility

expert

How can excessive letter spacing affect accessibility?

Excessive letter spacing can impact readability. Which of the following is a true statement about accessibility and letter spacing?

A Increasing letter spacing always improves readability for all users.

B Too much letter spacing can make text harder to read for people with dyslexia.

C Letter spacing has no impact on screen readers or visual accessibility.

D Reducing letter spacing improves readability for users with low vision.

💡 Hint

Think about how spacing affects letter recognition.

Studies show that too much letter spacing can disrupt word shape recognition, making reading harder for people with dyslexia. Moderate spacing is best.

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