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

Need a 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

Need a 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

Need a 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
  

Need a hint?

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