Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Learn Challenge: Typography in Action | Core Concepts and Basic Styling
Tailwind CSS for Web Development

book
Challenge: Typography in Action

Task

Using the Tailwind CSS utilities for typography, create a text component with the following specifications:

  1. A heading (h1) with:

    • Font size of 4xl;

    • Bold font weight;

    • Normal line height.

  2. A subheading (h2) with:

    • Font size of 2xl;

    • Semi-bold font weight;

    • Tight line height.

  3. A paragraph (p) with:

    • Font size of base;

    • Normal font weight;

    • Relaxed line height.

html

index.html

copy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Challenge: Applying Typography Utilities - Task</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<h1 class="text-_____ font-_____ leading-_____">Main Heading</h1>
<h2 class="_____-_____ _____-_____ _____-_____">Subheading</h2>
<p class="_____ _____ _____">
This is a paragraph demonstrating different font sizes, font weights, and
line heights using Tailwind CSS utilities.
</p>
</body>
</html>

  1. Font Size: Use text-4xl, text-2xl, text-base for font sizes;

  2. Font Weight: Use font-bold, font-semibold, font-normal for font weights;

  3. Line Height: Use leading-normal, leading-tight, leading-relaxed for line heights.

html

index.html

copy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Challenge: Applying Typography Utilities - Solution</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<h1 class="text-4xl font-bold leading-normal">Main Heading</h1>
<h2 class="text-2xl font-semibold leading-tight">Subheading</h2>
<p class="text-base font-normal leading-relaxed">
This is a paragraph demonstrating different font sizes, font weights, and
line heights using Tailwind CSS utilities.
</p>
</body>
</html>

Everything was clear?

How can we improve it?

Thanks for your feedback!

Section 2. Chapter 8

Ask AI

expand
ChatGPT

Ask anything or try one of the suggested questions to begin our chat

some-alt