0
0
Tailwindmarkup~30 mins

Line height and leading in Tailwind - Mini Project: Build & Apply

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Line height and leading with Tailwind CSS
📖 Scenario: You are creating a simple webpage that shows a paragraph of text. You want to control the space between lines of text to make it easier to read.
🎯 Goal: Build a webpage with a paragraph that uses Tailwind CSS to set the line height (leading) to a specific value.
📋 What You'll Learn
Use Tailwind CSS classes to set line height
Create a paragraph with some sample text
Apply a custom leading class to the paragraph
Use semantic HTML5 structure
💡 Why This Matters
🌍 Real World
Controlling line height is important for making text easy to read on websites and apps.
💼 Career
Web developers often use Tailwind CSS to quickly style text and layout with consistent spacing.
Progress0 / 4 steps
1
Create the HTML skeleton with a paragraph
Write the basic HTML5 structure with lang="en", charset="UTF-8", and a <main> section. Inside <main>, add a <p> paragraph with the exact text: "Tailwind CSS makes styling easy."
Tailwind
Need a hint?

Start with a simple HTML page. Use <p> inside <main> for the text.

2
Add Tailwind CSS link to the head
Add the official Tailwind CSS CDN link inside the <head> section using the exact href: https://cdn.tailwindcss.com
Tailwind
Need a hint?

Use a <script> tag with the exact src attribute to load Tailwind CSS from CDN.

3
Apply a Tailwind leading class to the paragraph
Add the Tailwind class leading-loose to the <p> tag to increase the line height.
Tailwind
Need a hint?

Use the class attribute on the paragraph and add leading-loose to it.

4
Add a heading with a different leading class
Add an <h1> heading above the paragraph inside <main> with the text "Line Height Example" and apply the Tailwind class leading-tight to it.
Tailwind
Need a hint?

Place the heading above the paragraph and add the class leading-tight to it.