Pierwsza strona w Tailwind
Zbudować prostą sekcję hero, korzystając wyłącznie z klas narzędziowych Tailwind, i nabrać wprawy w pracy z podejściem opartym na klasach.
Pierwsza strona w Tailwind to bezpłatna lekcja Tailwind CSS Academy na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Tailwind CSS Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Tailwind CSS Academy zawiera 4 lekcji w sumie.
Planowanie sekcji hero
Sekcja hero to pierwsza rzecz, którą widzą odwiedzający: nagłówek, podtytuł oraz jeden lub dwa przyciski. Zbudujesz kompletną sekcję, używając wyłącznie klas utility Tailwind.
Konfigurowanie szkieletu HTML
Zacznij od szkieletu HTML i dołącz skompilowany CSS. Dodaj min-h-screen, aby treść body wypełniała obszar widoku, oraz bg-gray-50 jako delikatne tło projektu.
<!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>Tworzenie paska nawigacji
Zbuduj navbar za pomocą flex items-center justify-between, aby przesunąć logo w lewo, a linki w prawo. Dodaj bg-white shadow-sm oraz trochę paddingu, aby uzyskać czysty, lekko uniesiony wygląd.
<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>Budowanie kontenera hero
Wyśrodkuj kontener hero za pomocą max-w-4xl mx-auto, aby zachował czytelność na dużych ekranach, a następnie dodaj px-6 py-24 dla odstępów i text-center, aby wyrównać całość.
<section class="px-6 py-24">
<div class="max-w-4xl mx-auto text-center">
<!-- headline, subheadline, buttons -->
</div>
</section>Pisanie nagłówka
Napisz wyrazisty nagłówek: text-5xl font-extrabold zapewni rozmiar i grubość, text-gray-900 mocny kontrast, a tracking-tight spójny wygląd dużych liter.
<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>Dodawanie podtytułu
Dodaj poniżej podtytuł: text-xl text-gray-500 nada mu spokojny, pomocniczy charakter, max-w-2xl mx-auto zapewni wygodną długość wiersza, a mb-10 oddzieli go od przycisków.
<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>Tworzenie przycisków wezwania do działania
Dodaj dwa przyciski CTA: wypełniony przycisk główny z bg-indigo-600 text-white oraz drugorzędny przycisk konturowy. Umieść je w kontenerze flex z odstępem, aby znalazły się obok siebie.
<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>Dodawanie gradientu tła
Dodaj sekcji hero głębi za pomocą gradientu. Użyj bg-gradient-to-* do określenia kierunku oraz from-* i to-* do ustawienia kolorów — delikatne przejście from-white to-indigo-50 zapewni subtelny efekt.
<section class="bg-gradient-to-b from-white to-indigo-50 px-6 py-24">
<!-- hero content -->
</section>Składanie sekcji hero
Oto kompletna sekcja hero ze wszystkimi elementami. Zwróć uwagę, że cały projekt jest zapisany w nazwach klas — czytając je od góry do dołu, możesz dokładnie wyobrazić sobie efekt.
<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>Dodawanie wiersza funkcji
Pod sekcją hero dodaj wiersz funkcji. Użyj grid grid-cols-1 md:grid-cols-3 gap-8, aby karty układały się jedna pod drugą na urządzeniach mobilnych i obok siebie na większych ekranach.
<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>Wykańczanie strony stopką
Zakończ stronę stopką: bg-gray-800 text-gray-400 zapewnią ciemny kontrast, a text-center py-8 utrzyma kompaktowy wygląd. To kompletna strona zbudowana wyłącznie za pomocą klas utility.
<footer class="bg-gray-800 text-gray-400 text-center py-8">
<p class="text-sm">© 2024 MyBrand. Built with Tailwind CSS.</p>
</footer>Szybkie sprawdzenie
Szybkie sprawdzenie! Zobacz, jak powstała Twoja pierwsza strona. 🎨
Podsumowanie lekcji
Udało Ci się zbudować prawdziwą stronę! Sekcja hero łączy układ, typografię i kolor, gradienty korzystają z from-* i to-*, a flex i grid obsługują kolumny. Następnie porównasz Tailwind z CSS.
Ucz się HTML dzięki korepetycjom AI — za darmo
Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.
- Kursy
- 30
- Lekcje
- 120
Często zadawane pytania
Czy lekcja „Pierwsza strona w Tailwind” jest bezpłatna?
Tak — pełny tekst „Pierwsza strona w Tailwind” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Tailwind CSS Academy, przejdź na CoddyKit PRO. Kurs Tailwind CSS Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Pierwsza strona w Tailwind”?
Zbudować prostą sekcję hero, korzystając wyłącznie z klas narzędziowych Tailwind, i nabrać wprawy w pracy z podejściem opartym na klasach. Ćwiczysz Tailwind CSS Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Tailwind CSS Academy?
Nie wymagamy żadnego doświadczenia. Tailwind CSS Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.
Ile czasu zajmuje lekcja „Pierwsza strona w Tailwind”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Tailwind CSS Academy?
Tak. Każda lekcja Tailwind CSS Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Wyjaśnienie podejścia utility-first w CSS
- Instalacja i konfiguracja Tailwind
- Pierwsza strona w Tailwind
- Tailwind a tradycyjny CSS