Bird
Raised Fist0
Tailwindmarkup~30 mins

Font family utilities 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 Family Utilities with Tailwind CSS
📖 Scenario: You are creating a simple webpage for a local bakery. The bakery wants to use different font styles for headings and paragraphs to make the text look friendly and easy to read.
🎯 Goal: Build a webpage using Tailwind CSS that applies different font families to the heading and paragraph text using Tailwind's font family utilities.
📋 What You'll Learn
Use Tailwind CSS font family utilities to style text
Apply a serif font family to the main heading
Apply a sans-serif font family to the paragraph
Use semantic HTML elements
Ensure the page is responsive and accessible
💡 Why This Matters
🌍 Real World
Websites often need different font styles to create a clear and attractive design. Using Tailwind's font family utilities makes it easy to apply consistent fonts without writing custom CSS.
💼 Career
Knowing how to use utility-first CSS frameworks like Tailwind is valuable for front-end developers to quickly style websites with clean, maintainable code.
Progress0 / 4 steps
1
Create the HTML structure
Create a basic HTML5 skeleton with a <header> containing an <h1> with the text "Welcome to Sweet Treats Bakery" and a <main> containing a <p> with the text "Freshly baked goods every day."
Tailwind
Hint

Use semantic tags <header> and <main> with the exact text inside <h1> and <p>.

2
Add Tailwind CSS link
Add the Tailwind CSS CDN link inside the <head> section to enable Tailwind utilities on the page.
Tailwind
Hint

Use the official Tailwind CSS CDN script tag inside <head>.

3
Apply font family utilities
Add the Tailwind class font-serif to the <h1> and the class font-sans to the <p> to apply serif font to the heading and sans-serif font to the paragraph.
Tailwind
Hint

Use the exact Tailwind classes font-serif on the heading and font-sans on the paragraph.

4
Add accessibility and responsive design
Add an aria-label with the value "Bakery main heading" to the <h1> and add responsive padding classes p-4 sm:p-8 to the <main> for better spacing on small and larger screens.
Tailwind
Hint

Use aria-label="Bakery main heading" on the <h1> and add p-4 sm:p-8 classes to the <main> tag.

Practice

(1/5)
1. Which Tailwind CSS class applies a sans-serif font to text?
easy
A. font-bold
B. font-sans
C. font-mono
D. font-serif

Solution

  1. Step 1: Understand font family classes in Tailwind

    Tailwind provides font-sans for sans-serif fonts, font-serif for serif fonts, and font-mono for monospace fonts.

  2. Step 2: Identify the class for sans-serif

    The class font-sans applies a sans-serif font style to text.

  3. Final Answer:

    font-sans -> Option B

  4. Quick Check:

    Sans-serif font class = font-sans [OK]
Hint: Sans-serif font uses font-sans class in Tailwind [OK]
Common Mistakes:
  • Confusing font-serif with sans-serif
  • Using font-bold which controls weight, not font family
  • Choosing font-mono which is monospace, not sans-serif
2. Which of these is the correct Tailwind class to apply a monospace font?
easy
A. font-serif
B. font-sans
C. font-mono
D. font-light

Solution

  1. Step 1: Recall monospace font class in Tailwind

    Tailwind uses font-mono to apply monospace fonts, which have equal spacing for each character.

  2. Step 2: Confirm the correct class

    font-mono is the correct class to apply monospace fonts, while others apply serif, sans-serif, or font weight.

  3. Final Answer:

    font-mono -> Option C

  4. Quick Check:

    Monospace font class = font-mono [OK]
Hint: Monospace font always uses font-mono class [OK]
Common Mistakes:
  • Choosing font-serif or font-sans instead of font-mono
  • Confusing font-light (weight) with font family
  • Missing the monospace meaning of font-mono
3. What font family will the following HTML render with Tailwind?
<p class="font-serif">Hello World</p>
medium
A. Bold font
B. Monospace font
C. Sans-serif font
D. Serif font

Solution

  1. Step 1: Identify the class used in the paragraph

    The paragraph uses the class font-serif, which applies a serif font family.

  2. Step 2: Understand what serif font means

    Serif fonts have small decorative lines at the ends of letters, different from sans-serif or monospace fonts.

  3. Final Answer:

    Serif font -> Option D

  4. Quick Check:

    font-serif class = Serif font [OK]
Hint: font-serif class means serif font family [OK]
Common Mistakes:
  • Thinking font-serif applies sans-serif
  • Confusing font-serif with font-mono
  • Assuming font-bold changes font family
4. Find the error in this Tailwind usage:
<h1 class="font-sans-serif">Welcome</h1>
medium
A. font-sans-serif is not a valid Tailwind class
B. Missing quotes around class name
C. Should use font-mono for headings
D. Class name should be font-bold

Solution

  1. Step 1: Check the class name validity

    The class font-sans-serif is not a valid Tailwind font family class. Tailwind uses font-sans for sans-serif fonts.

  2. Step 2: Identify correct class for sans-serif

    The correct class to apply a sans-serif font is font-sans, not font-sans-serif.

  3. Final Answer:

    font-sans-serif is not a valid Tailwind class -> Option A

  4. Quick Check:

    Valid font family classes are font-sans, font-serif, font-mono [OK]
Hint: Tailwind font classes are font-sans, font-serif, font-mono only [OK]
Common Mistakes:
  • Adding extra words like '-serif' to font-sans
  • Confusing font weight classes with font family
  • Assuming font-mono is default for headings
5. You want to style a code block with a monospace font and make it easy to read on small screens. Which Tailwind classes should you use?
<code class="?">console.log('Hello')</code>
hard
A. font-mono text-sm
B. font-serif text-lg
C. font-sans text-xs
D. font-mono text-xl

Solution

  1. Step 1: Choose monospace font class for code

    Code blocks are best styled with monospace fonts, so use font-mono.

  2. Step 2: Select a small readable text size for small screens

    Use text-sm for smaller but readable text size on small devices.

  3. Final Answer:

    font-mono text-sm -> Option A

  4. Quick Check:

    Monospace + small text = font-mono text-sm [OK]
Hint: Use font-mono with text-sm for readable code on small screens [OK]
Common Mistakes:
  • Using font-serif or font-sans for code blocks
  • Choosing too large text size for small screens
  • Mixing font weight classes instead of font family