Your First Tailwind Page
Build a simple hero section using only Tailwind utility classes, getting comfortable with the class-based workflow.
Planning a Hero Section
A hero section is the first thing visitors see: a headline, subheadline, and a button or two. You will build a full one using only Tailwind utilities.
Setting Up the HTML Shell
Start with an HTML shell and link your compiled CSS. Add min-h-screen so the body fills the viewport and bg-gray-50 for a soft canvas to build on.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="./dist/output.css" rel="stylesheet" />
<title>My First Tailwind Page</title>
</head>
<body class="min-h-screen bg-gray-50">
<!-- content goes here -->
</body>
</html>All lessons in this course
- Utility-First CSS Explained
- Installing and Configuring Tailwind
- Your First Tailwind Page
- Tailwind vs Traditional CSS