Bird
Raised Fist0
Tailwindmarkup~15 mins

Font weight control in Tailwind - Mini Project: Build & Apply

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
Font Weight Control with Tailwind CSS
📖 Scenario: You are creating a simple webpage to show different font weights using Tailwind CSS. This will help users see how text looks with light, normal, and bold font weights.
🎯 Goal: Build a webpage with three paragraphs. Each paragraph uses a different Tailwind CSS font weight class: font-light, font-normal, and font-bold.
📋 What You'll Learn
Use Tailwind CSS classes to control font weight
Create three paragraphs with exact text content
Apply font-light to the first paragraph
Apply font-normal to the second paragraph
Apply font-bold to the third paragraph
Use semantic HTML5 structure with <main> and <section>
💡 Why This Matters
🌍 Real World
Controlling font weight is important for web design to create clear visual hierarchy and improve readability.
💼 Career
Web developers often use Tailwind CSS to quickly style text and layout with utility classes, making font weight control a common task.
Progress0 / 4 steps
1
Create the HTML skeleton with Tailwind CSS link
Create a basic HTML5 page with lang="en", charset="UTF-8", and a viewport meta tag. Inside the <body>, add a <main> element with a <section>. Link the Tailwind CSS CDN stylesheet in the <head>.
Tailwind
Hint

Remember to add the Tailwind CSS CDN link inside the <head> section.

2
Add paragraphs with font weight classes
Inside the <section>, add three paragraphs with these exact texts: Light font weight, Normal font weight, and Bold font weight. Assign the Tailwind CSS classes font-light, font-normal, and font-bold respectively to these paragraphs.
Tailwind
Hint

Use the exact class names font-light, font-normal, and font-bold on the paragraphs.

3
Add a container with padding and center alignment
Wrap the <section> content inside a <div> with Tailwind classes p-6 for padding and text-center to center the text horizontally.
Tailwind
Hint

Use a <div> with classes p-6 and text-center wrapping the paragraphs.

4
Make the page responsive with a max width container
Add the Tailwind class max-w-md and mx-auto to the <div> container to limit its width on larger screens and center it horizontally.
Tailwind
Hint

Add max-w-md and mx-auto classes to the existing <div> to make it responsive and centered.

Practice

(1/5)
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