La prima pagina con Tailwind
Costruisca una semplice sezione hero usando soltanto le classi utility di Tailwind, acquisendo familiarità con il flusso di lavoro basato sulle classi.
La prima pagina con Tailwind è una lezione Tailwind CSS Academy gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Tailwind CSS Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Tailwind CSS Academy include 4 lezioni in totale.
Parti di questa lezione non sono ancora state tradotte e vengono mostrate in inglese.
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.
Domande Frequenti
La lezione «La prima pagina con Tailwind» è gratuita?
Sì — il testo completo di «La prima pagina con Tailwind» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Tailwind CSS Academy, passa a CoddyKit PRO. Il corso Tailwind CSS Academy include 4 lezioni in totale.
Cosa imparerò in «La prima pagina con Tailwind»?
Costruisca una semplice sezione hero usando soltanto le classi utility di Tailwind, acquisendo familiarità con il flusso di lavoro basato sulle classi. Eserciti Tailwind CSS Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Tailwind CSS Academy?
Non è richiesta alcuna esperienza precedente. Tailwind CSS Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.
Quanto tempo richiede la lezione «La prima pagina con Tailwind»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Tailwind CSS Academy?
Sì. Ogni lezione Tailwind CSS Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- CSS utility-first spiegato
- Installazione e configurazione di Tailwind
- La prima pagina con Tailwind
- Tailwind e CSS tradizionale