Font weight control in Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

📝 Syntax

intermediate

Which Tailwind class sets the font weight to bold?

Choose the Tailwind CSS class that correctly applies a bold font weight to text.

A font-bold

B font-heavy

C text-bold

D font-strong

💡 Hint

Tailwind uses the prefix font- for font weight classes.

The correct Tailwind class for bold font weight is font-bold. Other options are not valid Tailwind classes.

❓ rendering

intermediate

What font weight will the text have with class font-light?

If you apply the Tailwind class font-light to a paragraph, what font weight will the text display in the browser?

Tailwind

<p class="font-light">Sample text</p>

A Font weight 900 (black)

B Font weight 700 (bold)

C Font weight 300 (light)

D Font weight 400 (normal)

💡 Hint

Tailwind font weights follow numeric values similar to CSS font-weight property.

The font-light class applies a font weight of 300, which is lighter than normal (400).

❓ selector

advanced

Which Tailwind class applies the heaviest font weight?

Select the Tailwind CSS class that applies the heaviest (boldest) font weight available by default.

A font-black

B font-extrabold

C font-thin

D font-semibold

💡 Hint

Tailwind font weights range from thin (100) to black (900).

font-black applies font weight 900, which is the heaviest font weight in Tailwind by default.

🧠 Conceptual

advanced

How does Tailwind's font-semibold compare to font-bold?

Choose the correct statement about the difference between font-semibold and font-bold in Tailwind CSS.

A <code>font-semibold</code> is heavier than <code>font-bold</code>

B <code>font-semibold</code> is lighter than <code>font-bold</code>

C Both have the same font weight

D <code>font-semibold</code> is not a valid Tailwind class

💡 Hint

Think about numeric font-weight values: semibold is usually less than bold.

font-semibold applies font weight 600, which is lighter than font-bold at 700.

❓ accessibility

expert

Why is controlling font weight important for accessibility?

Select the best reason why adjusting font weight using Tailwind classes can improve accessibility on websites.

A Using font weight classes disables screen readers

B Lighter font weights reduce page load time significantly

C Font weight changes do not affect accessibility

D Heavier font weights improve readability for users with low vision by increasing contrast

💡 Hint

Think about how text visibility helps users with vision difficulties.

Heavier font weights increase the thickness of letters, making text easier to see and read for users with low vision, improving accessibility.

Practice

1. Which Tailwind class makes text appear very thin?

easy

A. font-light

B. font-bold

C. font-black

D. font-thin

Solution

1. Step 1: Understand font weight scale in Tailwind

   Tailwind uses classes like font-thin for very thin text and font-black for very thick text.

2. Step 2: Identify the class for very thin text

   font-thin is the class that makes text very thin, thinner than font-light.

3. Final Answer:

   font-thin -> Option D

4. Quick Check:

   Thin text = font-thin [OK]

Hint: Thin text uses font-thin class in Tailwind [OK]

Common Mistakes:

• Confusing font-thin with font-light
• Choosing font-bold which is thick text
• Thinking font-black is thin

2. Which of these is the correct Tailwind class to make text bold?

easy

A. font-heavy

B. font-bold

C. font-strong

D. font-thick

Solution

1. Step 1: Recall Tailwind font weight classes

   Tailwind uses specific class names like font-bold for bold text, not generic words like heavy or thick.

2. Step 2: Identify the correct class for bold text

   font-bold is the official class to make text bold in Tailwind.

3. Final Answer:

   font-bold -> Option B

4. Quick Check:

   Bold text = font-bold [OK]

Hint: Bold text always uses font-bold class [OK]

Common Mistakes:

• Using non-existent classes like font-heavy
• Confusing font-bold with font-thick
• Trying font-strong which is invalid

3. What font weight will the text have with this class: font-semibold?

medium

A. Medium-bold text

B. Normal weight text

C. Very thin text

D. Very thick text

Solution

1. Step 1: Understand Tailwind font weight scale

   Classes go from thin, light, normal, medium, semibold, bold, to black. font-semibold is between medium and bold.

2. Step 2: Match font-semibold to weight description

   font-semibold means medium-bold text, stronger than normal but not the thickest.

3. Final Answer:

   Medium-bold text -> Option A

4. Quick Check:

   font-semibold = medium-bold [OK]

Hint: Semibold means medium-bold weight in Tailwind [OK]

Common Mistakes:

• Thinking font-semibold is very thin
• Confusing it with normal weight
• Assuming it means very thick text

4. You want to make text bold but accidentally write font-bld. What happens?

medium

A. Text stays normal weight

B. Text becomes bold anyway

C. Tailwind throws an error and stops loading

D. Text disappears from the page

Solution

1. Step 1: Check if font-bld is a valid Tailwind class

   font-bld is not a valid Tailwind class, so it won't apply any font weight style.

2. Step 2: Understand how invalid classes behave

   Invalid classes are ignored by Tailwind CSS, so the text keeps its default normal weight.

3. Final Answer:

   Text stays normal weight -> Option A

4. Quick Check:

   Invalid class ignored = normal weight text [OK]

Hint: Invalid classes do nothing; text stays default weight [OK]

Common Mistakes:

• Expecting Tailwind to throw an error
• Thinking text becomes bold anyway
• Assuming text disappears

5. You want to style a heading with very thick text but also make it responsive: thin on small screens and black on large screens. Which Tailwind classes do you use?

hard

A. font-light lg-font-black

B. font-thin font-lg:font-black

C. font-thin lg:font-black

D. font-thin lg-font-black

Solution

1. Step 1: Identify base and responsive classes

   Base class applies to all screen sizes; responsive prefixes like lg: apply styles on large screens.

2. Step 2: Check correct syntax for responsive font weight

   font-thin sets thin text by default; lg:font-black applies very thick text on large screens.

3. Step 3: Eliminate incorrect options

   Options with font-lg:font-black or lg-font-black are invalid syntax in Tailwind.

4. Final Answer:

   font-thin lg:font-black -> Option C

5. Quick Check:

   Responsive prefix = lg:font-black [OK]

Hint: Use lg: prefix for large screen styles [OK]

Common Mistakes:

• Using incorrect responsive syntax like font-lg:
• Missing colon after lg
• Confusing base and responsive classes