Font weight control in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to make the text bold using Tailwind CSS.

Tailwind

<p class="[1]">This text is bold.</p>

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

Afont-light

Btext-lg

Cfont-bold

Dtext-center

Attempts:

3 left

💡 Hint

Common Mistakes

Using text size classes like text-lg instead of font weight.

Using alignment classes like text-center which do not affect weight.

The font-bold class in Tailwind CSS makes the text bold by setting a heavier font weight.

2fill in blank

medium

Complete the code to make the text have a light font weight using Tailwind CSS.

Tailwind

<span class="[1]">This text is light.</span>

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

Afont-light

Bfont-normal

Cfont-extrabold

Dfont-semibold

Attempts:

3 left

💡 Hint

Common Mistakes

Using font-semibold which is heavier than normal.

Using font-extrabold which is very heavy.

The font-light class applies a lighter font weight, making the text appear thinner.

3fill in blank

hard

Fix the error in the class to make the text have normal font weight.

Tailwind

<div class="[1]">Normal weight text.</div>

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

Afont-normal

Bfont-light

Cfont-heavy

Dfont-bold

Attempts:

3 left

💡 Hint

Common Mistakes

Using font-heavy which does not exist.

Using font-bold which is heavier than normal.

The correct Tailwind class for normal font weight is font-normal. font-heavy is not a valid class.

4fill in blank

hard

Fill both blanks to make the heading bold and centered.

Tailwind

<h1 class="[1] [2]">Welcome!</h1>

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

Afont-bold

Btext-center

Cfont-light

Dtext-left

Attempts:

3 left

💡 Hint

Common Mistakes

Using font-light instead of bold.

Using text-left which aligns text to the left.

font-bold makes the text bold, and text-center centers the text horizontally.

5fill in blank

hard

Fill all three blanks to create a paragraph with semi-bold font, right-aligned text, and large font size.

Tailwind

<p class="[1] [2] [3]">Styled paragraph.</p>

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

Afont-semibold

Btext-right

Ctext-xl

Dfont-light

Attempts:

3 left

💡 Hint

Common Mistakes

Using font-light instead of semi-bold.

Using text-left instead of right alignment.

Using smaller font size classes like text-sm.

font-semibold applies a semi-bold font weight, text-right aligns text to the right, and text-xl sets a large font size.

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