Bird
Raised Fist0
Tailwindmarkup~5 mins

Font weight control in Tailwind

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
Introduction

Font weight control helps you make text look lighter or bolder. It changes how thick or thin the letters appear.

To make headings stand out by making them bold.
To make body text easier to read by using normal weight.
To highlight important words by making them heavier.
To create a visual hierarchy in a webpage.
To match a brand's style by adjusting text thickness.
Syntax
Tailwind
font-thin
font-extralight
font-light
font-normal
font-medium
font-semibold
font-bold
font-extrabold
font-black

Each class changes the font weight from very thin to very bold.

Use these classes on any text element like <p>, <h1>, or <span>.

Examples
Applies a very light font weight to the paragraph.
Tailwind
<p class="font-thin">This text is very thin.</p>
Makes the heading text thick and strong.
Tailwind
<h1 class="font-bold">This heading is bold.</h1>
Gives a balanced font weight, not too light or bold.
Tailwind
<span class="font-medium">Medium weight text here.</span>
Sample Program

This page shows different font weights using Tailwind CSS classes. Each paragraph uses a different font weight class to demonstrate how text thickness changes visually.

Tailwind
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Font Weight Control Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-6">
  <h1 class="font-black text-3xl mb-4">Font Weight Examples</h1>
  <p class="font-thin mb-2">This text is very thin.</p>
  <p class="font-light mb-2">This text is light.</p>
  <p class="font-normal mb-2">This text is normal weight.</p>
  <p class="font-semibold mb-2">This text is semi-bold.</p>
  <p class="font-bold mb-2">This text is bold.</p>
  <p class="font-extrabold mb-2">This text is extra bold.</p>
  <p class="font-black">This text is the heaviest black font weight.</p>
</body>
</html>
OutputSuccess
Important Notes

Font weight classes work best with fonts that support multiple weights.

Use font-normal to reset to normal weight if needed.

Combining font weight with size and color helps create clear text hierarchy.

Summary

Font weight control changes how thick or thin text looks.

Tailwind provides easy classes from font-thin to font-black.

Use these classes to make your text clear and visually appealing.

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