Font size and scaling in Tailwind - Mini Project: Build & Apply

Responsive Font Size with Tailwind CSS

📖 Scenario: You are building a simple webpage for a local bakery. The bakery wants the page's main heading to have a font size that looks good on all devices, from phones to large desktop screens.

🎯 Goal: Create a heading that uses Tailwind CSS classes to have a base font size and scale up on larger screens. The heading text should be "Welcome to Sweet Treats Bakery".

📋 What You'll Learn

Use Tailwind CSS utility classes for font size

Set a base font size of text-lg for small screens

Scale the font size to text-3xl on medium screens and above

Use responsive prefixes like md: for scaling

Ensure the heading is inside a semantic <header> element

💡 Why This Matters

🌍 Real World

Responsive font sizes are essential for websites to look good on phones, tablets, and desktops without extra effort.

💼 Career

Web developers use Tailwind CSS to quickly style text and layout responsively, improving user experience across devices.

1

Create the HTML skeleton with a header and heading

Write the basic HTML structure with a <header> element containing an <h1> heading. The heading text must be exactly Welcome to Sweet Treats Bakery.

Tailwind

Hint

Use semantic tags: <header> and <h1>. Put the exact text inside the heading.

2

Add the base font size class for small screens

Add the Tailwind CSS class text-lg to the <h1> element to set the base font size for small screens.

Tailwind

Hint

Use the class attribute on the <h1> tag and add text-lg.

3

Add responsive scaling for medium screens and above

Add the Tailwind CSS class md:text-3xl to the <h1> element so the font size scales up on medium screens and larger.

Tailwind

Hint

Use the md: prefix before text-3xl inside the class attribute.

4

Add a container with padding and center the heading

Wrap the <h1> inside a <div> with Tailwind classes container, mx-auto, and p-4 to center the content and add padding.

Tailwind

   
    Welcome to Sweet Treats Bakery
  

Hint

Use a <div> with the classes container mx-auto p-4 wrapping the <h1>.

Practice

1. Which Tailwind class sets the font size to extra small?

easy

A. text-xs

B. text-lg

C. text-3xl

D. text-base

Solution

1. Step 1: Understand Tailwind font size naming

   Tailwind uses text-xs for extra small font size.

2. Step 2: Match the class to the size

   Among the options, only text-xs means extra small.

3. Final Answer:

   text-xs -> Option A

4. Quick Check:

   Extra small font = text-xs [OK]

Hint: Extra small font always uses text-xs in Tailwind [OK]

Common Mistakes:

• Confusing text-xs with text-base or text-lg
• Thinking text-3xl is small instead of large
• Assuming text-base is the smallest size

2. Which of these is the correct Tailwind class to make text very large, close to the largest size?

easy

A. text-2xl

B. text-sm

C. text-9xl

D. text-base

Solution

1. Step 1: Recall Tailwind font size scale

   Tailwind font sizes go up to text-9xl for very large text.

2. Step 2: Identify the largest size option

   Among the options, text-9xl is the largest size available.

3. Final Answer:

   text-9xl -> Option C

4. Quick Check:

   Largest font size = text-9xl [OK]

Hint: Largest font size in Tailwind is text-9xl [OK]

Common Mistakes:

• Choosing text-2xl thinking it's the largest
• Confusing text-sm as large
• Using text-base which is default size

3. What font size will the following HTML render with Tailwind?

<p class="text-lg">Hello</p>

medium

A. Large font size

B. Small font size

C. Medium font size

D. Extra large font size

Solution

1. Step 1: Understand the class text-lg

   The class text-lg in Tailwind means large font size, bigger than base.

2. Step 2: Match the size description

   Among the options, "Large font size" best matches text-lg.

3. Final Answer:

   Large font size -> Option A

4. Quick Check:

   text-lg = Large font size [OK]

Hint: text-lg means large font size in Tailwind [OK]

Common Mistakes:

• Thinking text-lg is medium or small
• Confusing text-lg with text-xl or text-base
• Ignoring the class and guessing default size

4. You want to make text smaller on mobile but larger on desktop using Tailwind. Which class combination is correct?

<p class="?">Responsive Text</p>

medium

A. text-lg sm:text-sm

B. text-sm md:text-lg

C. text-base lg:text-xs

D. text-xl md:text-xs

Solution

1. Step 1: Understand Tailwind responsive prefixes

   Tailwind uses prefixes like md: to apply styles on medium screens and up.

2. Step 2: Choose smaller text by default and larger on medium screens

   text-sm md:text-lg means small text on mobile and large text on medium+ screens.

3. Final Answer:

   text-sm md:text-lg -> Option B

4. Quick Check:

   Mobile small, desktop large = text-sm md:text-lg [OK]

Hint: Use mobile first: small text, then md: larger text [OK]

Common Mistakes:

• Reversing sizes for mobile and desktop
• Using wrong breakpoint prefixes
• Not using responsive prefixes at all

5. You want a heading that scales smoothly from small on mobile to very large on desktop using Tailwind. Which class set achieves this best?

<h1 class="?">Scaling Heading</h1>

hard

A. text-3xl md:text-5xl lg:text-6xl

B. text-lg sm:text-xl md:text-2xl

C. text-xs sm:text-base md:text-lg

D. text-sm md:text-4xl lg:text-7xl

Solution

1. Step 1: Identify scaling from small to very large

   We want text starting small on mobile, then bigger on medium, and very large on large screens.

2. Step 2: Check each option's size progression

   text-sm md:text-4xl lg:text-7xl scales from text-sm (small), to text-4xl (large), to text-7xl (very large), matching the requirement.

3. Final Answer:

   text-sm md:text-4xl lg:text-7xl -> Option D

4. Quick Check:

   Small to very large scaling = text-sm md:text-4xl lg:text-7xl [OK]

Hint: Use increasing sizes with responsive prefixes for smooth scaling [OK]

Common Mistakes:

• Choosing options with small max sizes
• Not increasing size enough on larger screens
• Using sizes that start too large on mobile