Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Lære 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>

Alt var klart?

Hvordan kan vi forbedre det?

Takk for tilbakemeldingene dine!

Seksjon 2. Kapittel 8
some-alt