Tailwindmarkup~15 mins

Font weight control in Tailwind - Mini Project: Build & Apply

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Font Weight Control with Tailwind CSS

📖 Scenario: You are creating a simple webpage to show different font weights using Tailwind CSS. This will help users see how text looks with light, normal, and bold font weights.

🎯 Goal: Build a webpage with three paragraphs. Each paragraph uses a different Tailwind CSS font weight class: font-light, font-normal, and font-bold.

📋 What You'll Learn

Use Tailwind CSS classes to control font weight

Create three paragraphs with exact text content

Apply font-light to the first paragraph

Apply font-normal to the second paragraph

Apply font-bold to the third paragraph

Use semantic HTML5 structure with <main> and <section>

💡 Why This Matters

🌍 Real World

Controlling font weight is important for web design to create clear visual hierarchy and improve readability.

💼 Career

Web developers often use Tailwind CSS to quickly style text and layout with utility classes, making font weight control a common task.

Progress0 / 4 steps

Create the HTML skeleton with Tailwind CSS link

Create a basic HTML5 page with lang="en", charset="UTF-8", and a viewport meta tag. Inside the <body>, add a <main> element with a <section>. Link the Tailwind CSS CDN stylesheet in the <head>.

Tailwind

Need a hint?

Remember to add the Tailwind CSS CDN link inside the <head> section.

Add paragraphs with font weight classes

Inside the <section>, add three paragraphs with these exact texts: Light font weight, Normal font weight, and Bold font weight. Assign the Tailwind CSS classes font-light, font-normal, and font-bold respectively to these paragraphs.

Tailwind




    
    
    
    Font Weight Example

Need a hint?

Use the exact class names font-light, font-normal, and font-bold on the paragraphs.

Add a container with padding and center alignment

Wrap the <section> content inside a <div> with Tailwind classes p-6 for padding and text-center to center the text horizontally.

Tailwind




    
    
    
    Font Weight Example

Need a hint?

Use a <div> with classes p-6 and text-center wrapping the paragraphs.

Make the page responsive with a max width container

Add the Tailwind class max-w-md and mx-auto to the <div> container to limit its width on larger screens and center it horizontally.

Tailwind




    
    
    
    Font Weight Example

Need a hint?

Add max-w-md and mx-auto classes to the existing <div> to make it responsive and centered.