Bird
Raised Fist0
Tailwindmarkup~5 mins

Font weight control in Tailwind - Cheat Sheet & Quick Revision

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
Recall & Review
beginner
What does the Tailwind CSS class font-bold do?
It makes the text bold by setting the font weight to 700, making the text thicker and more prominent.
Click to reveal answer
beginner
Which Tailwind class sets the font weight to normal (400)?
The class font-normal sets the font weight to 400, which is the normal weight for text.
Click to reveal answer
beginner
How do you make text lighter than normal using Tailwind CSS?
Use the class font-light to make text lighter, which sets the font weight to 300.
Click to reveal answer
intermediate
What is the difference between font-semibold and font-bold in Tailwind?
font-semibold sets font weight to 600, which is semi-bold, while font-bold sets it to 700, which is bolder.
Click to reveal answer
intermediate
Can you use Tailwind classes to make text extra bold or thin? Which classes?
Yes. Use font-extrabold for extra bold (800) and font-thin for very thin text (100).
Click to reveal answer
Which Tailwind class makes text bold?
Afont-light
Bfont-normal
Cfont-thin
Dfont-bold
What font weight does font-normal apply?
A400
B600
C300
D700
If you want very thin text, which Tailwind class should you use?
Afont-semibold
Bfont-thin
Cfont-bold
Dfont-extrabold
Which class is heavier than font-semibold but lighter than font-extrabold?
Afont-bold
Bfont-light
Cfont-normal
Dfont-thin
Which Tailwind class would you use for semi-bold text?
Afont-light
Bfont-bold
Cfont-semibold
Dfont-normal
Explain how to control font weight in Tailwind CSS and give examples of classes for light, normal, and bold text.
Think about how text looks thinner or thicker and which classes you use.
You got /5 concepts.
    Describe the difference between font-semibold and font-extrabold in Tailwind CSS.
    Consider the numeric weight values and how bold the text appears.
    You got /3 concepts.

      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