Ihre erste Tailwind-Seite
Erstellen Sie einen einfachen Hero-Bereich ausschließlich mit Tailwind-Utility-Klassen und machen Sie sich mit dem klassenbasierten Workflow vertraut.
Ihre erste Tailwind-Seite ist eine kostenlose Tailwind CSS Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Tailwind CSS Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Tailwind CSS Academy-Kurs umfasst insgesamt 4 Lektionen.
Teile dieser Lektion wurden noch nicht übersetzt und werden auf Englisch angezeigt.
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>Creating the Navigation Bar
Build a navbar with flex items-center justify-between to push the logo left and links right. Add bg-white shadow-sm and some padding for a clean, lifted look.
<nav class="bg-white shadow-sm px-8 py-4 flex items-center justify-between">
<span class="text-xl font-bold text-indigo-600">MyBrand</span>
<div class="flex gap-6">
<a href="#" class="text-gray-600 hover:text-indigo-600">Home</a>
<a href="#" class="text-gray-600 hover:text-indigo-600">About</a>
<a href="#" class="text-gray-600 hover:text-indigo-600">Contact</a>
</div>
</nav>Building the Hero Container
Center the hero container with max-w-4xl mx-auto so it stays readable on big screens, then add px-6 py-24 for space and text-center to line everything up.
<section class="px-6 py-24">
<div class="max-w-4xl mx-auto text-center">
<!-- headline, subheadline, buttons -->
</div>
</section>Writing the Headline
Write a bold headline: text-5xl font-extrabold for size and weight, text-gray-900 for strong contrast, and tracking-tight so big letters feel cohesive.
<h1 class="text-5xl font-extrabold text-gray-900 tracking-tight mb-6">
Build beautiful UIs
<span class="text-indigo-600">faster than ever</span>
</h1>Adding the Subheadline
Add a subheadline below it: text-xl text-gray-500 keeps it quiet and supporting, max-w-2xl mx-auto holds a comfy line length, and mb-10 spaces the buttons.
<p class="text-xl text-gray-500 max-w-2xl mx-auto mb-10">
Tailwind CSS lets you design any component directly in your HTML
without writing a single line of custom CSS.
</p>Creating Call-to-Action Buttons
Add two CTA buttons: a filled primary with bg-indigo-600 text-white and an outline secondary. Wrap them in a flex container with a gap to sit side by side.
<div class="flex flex-col sm:flex-row gap-4 justify-center">
<a href="#" class="bg-indigo-600 text-white font-semibold py-3 px-8 rounded-lg hover:bg-indigo-700 transition-colors">
Get Started
</a>
<a href="#" class="border-2 border-indigo-600 text-indigo-600 font-semibold py-3 px-8 rounded-lg hover:bg-indigo-50 transition-colors">
Learn More
</a>
</div>Adding a Background Gradient
Give the hero depth with a gradient. Use bg-gradient-to-* for direction plus from-* and to-* for colors — a soft from-white to-indigo-50 adds a subtle lift.
<section class="bg-gradient-to-b from-white to-indigo-50 px-6 py-24">
<!-- hero content -->
</section>Putting the Hero Together
Here is the full hero with everything combined. Notice the whole design lives in the class names — read them top to bottom and you can picture it exactly.
<section class="bg-gradient-to-b from-white to-indigo-50 px-6 py-24">
<div class="max-w-4xl mx-auto text-center">
<h1 class="text-5xl font-extrabold text-gray-900 tracking-tight mb-6">
Build beautiful UIs
<span class="text-indigo-600">faster than ever</span>
</h1>
<p class="text-xl text-gray-500 max-w-2xl mx-auto mb-10">
Tailwind CSS lets you design any component directly in your HTML.
</p>
<div class="flex flex-col sm:flex-row gap-4 justify-center">
<a href="#" class="bg-indigo-600 text-white font-semibold py-3 px-8 rounded-lg hover:bg-indigo-700 transition-colors">
Get Started
</a>
<a href="#" class="border-2 border-indigo-600 text-indigo-600 font-semibold py-3 px-8 rounded-lg hover:bg-indigo-50 transition-colors">
Learn More
</a>
</div>
</div>
</section>Adding a Features Row
Below the hero, add a features row. Use grid grid-cols-1 md:grid-cols-3 gap-8 so cards stack on mobile and sit side by side on larger screens.
<section class="max-w-5xl mx-auto px-6 py-16">
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="text-center p-6">
<div class="text-4xl mb-4">⚡</div>
<h3 class="text-lg font-semibold text-gray-900 mb-2">Fast</h3>
<p class="text-gray-500 text-sm">JIT compilation generates only what you use.</p>
</div>
<!-- repeat for other features -->
</div>
</section>Finishing With a Footer
Finish with a footer: bg-gray-800 text-gray-400 for a dark contrast and text-center py-8 to keep it compact. That is a full page, built only with utilities.
<footer class="bg-gray-800 text-gray-400 text-center py-8">
<p class="text-sm">© 2024 MyBrand. Built with Tailwind CSS.</p>
</footer>Quick Check
Quick check! See how your first page came together. 🎨
Lesson Recap
You built a real page! A hero blends layout, type, and color, gradients use from-* and to-*, and flex and grid handle columns. Next up: Tailwind vs CSS.
Häufig gestellte Fragen
Ist die Lektion „Ihre erste Tailwind-Seite“ kostenlos?
Ja — der vollständige Text von „Ihre erste Tailwind-Seite“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Tailwind CSS Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Tailwind CSS Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Ihre erste Tailwind-Seite“?
Erstellen Sie einen einfachen Hero-Bereich ausschließlich mit Tailwind-Utility-Klassen und machen Sie sich mit dem klassenbasierten Workflow vertraut. Du übst Tailwind CSS Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Tailwind CSS Academy zu starten?
Keine Vorkenntnisse erforderlich. Tailwind CSS Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.
Wie lange dauert die Lektion „Ihre erste Tailwind-Seite“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Tailwind CSS Academy-Lektion Code schreiben und ausführen?
Ja. Jede Tailwind CSS Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Utility-First-CSS erklärt
- Tailwind installieren und konfigurieren
- Ihre erste Tailwind-Seite
- Tailwind im Vergleich zu traditionellem CSS