Deres første Tailwind-side
Bygg en enkel hero-seksjon med bare Tailwind utility-klasser, og bli fortrolig med den klassebaserte arbeidsflyten.
Deres første Tailwind-side er en gratis leksjon i Tailwind CSS Academy på CoddyKit. Dette er leksjon 3 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Tailwind CSS Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Tailwind CSS Academy inneholder totalt 4 leksjoner.
Planlegge en hero-seksjon
En hero-seksjon er det første besøkende ser: en overskrift, en underoverskrift og én eller to knapper. De skal bygge en komplett hero-seksjon med bare Tailwind-utility-klasser.
Sette opp HTML-skallet
Start med et HTML-skall og koble til den kompilerte CSS-en. Legg til min-h-screen slik at body fyller visningsområdet, og bg-gray-50 som et mykt lerret å bygge videre på.
<!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>Opprette navigasjonsfeltet
Bygg en navbar med flex items-center justify-between for å plassere logoen til venstre og lenkene til høyre. Legg til bg-white shadow-sm og litt innvendig marg for et rent, hevet uttrykk.
<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>Bygge hero-beholderen
Sentrer hero-beholderen med max-w-4xl mx-auto slik at den forblir lett å lese på store skjermer. Legg deretter til px-6 py-24 for luft og text-center for å justere alt.
<section class="px-6 py-24">
<div class="max-w-4xl mx-auto text-center">
<!-- headline, subheadline, buttons -->
</div>
</section>Skrive overskriften
Skriv en fet overskrift: text-5xl font-extrabold gir størrelse og tykkelse, text-gray-900 gir god kontrast, og tracking-tight sørger for at store bokstaver henger godt sammen.
<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>Legge til underoverskriften
Legg til en underoverskrift under den: text-xl text-gray-500 holder den dempet og støttende, max-w-2xl mx-auto gir en behagelig linjelengde, og mb-10 skaper avstand til knappene.
<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>Opprette handlingsknapper
Legg til to CTA-knapper: en utfylt primærknapp med bg-indigo-600 text-white og en sekundærknapp med omriss. Legg dem i en flex-beholder med gap, slik at de står ved siden av hverandre.
<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>Legge til en bakgrunnsgradient
Gi hero-seksjonen mer dybde med en gradient. Bruk bg-gradient-to-* for retningen samt from-* og to-* for fargene – en myk overgang fra-white til-indigo-50 gir et diskret løft.
<section class="bg-gradient-to-b from-white to-indigo-50 px-6 py-24">
<!-- hero content -->
</section>Sette sammen hero-seksjonen
Her er den komplette hero-seksjonen med alt satt sammen. Legg merke til at hele designet ligger i klassenavnene – les dem ovenfra og ned, så kan De se det nøyaktig for Dem.
<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>Legge til en funksjonsrad
Legg til en funksjonsrad under hero-seksjonen. Bruk grid grid-cols-1 md:grid-cols-3 gap-8 slik at kortene stables på mobil og ligger ved siden av hverandre på større skjermer.
<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>Avslutte med en bunntekst
Avslutt med en bunntekst: bg-gray-800 text-gray-400 gir mørk kontrast, og text-center py-8 holder den kompakt. Det er en komplett side, bygget utelukkende med utility-klasser.
<footer class="bg-gray-800 text-gray-400 text-center py-8">
<p class="text-sm">© 2024 MyBrand. Built with Tailwind CSS.</p>
</footer>Kort kontroll
Kort kontroll! Se hvordan Deres første side ble satt sammen. 🎨
Oppsummering av leksjonen
De har bygget en ekte side! En hero-seksjon kombinerer layout, typografi og farge, gradienter bruker from-* og to-*, og flex og grid håndterer kolonner. Neste trinn: Tailwind kontra CSS.
Lær deg HTML med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 30
- Leksjoner
- 120
Ofte stilte spørsmål
Er leksjonen «Deres første Tailwind-side» gratis?
Ja – hele teksten i «Deres første Tailwind-side» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av Tailwind CSS Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Tailwind CSS Academy inneholder totalt 4 leksjoner.
Hva lærer jeg i «Deres første Tailwind-side»?
Bygg en enkel hero-seksjon med bare Tailwind utility-klasser, og bli fortrolig med den klassebaserte arbeidsflyten. Du øver på Tailwind CSS Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med Tailwind CSS Academy?
Ingen tidligere erfaring er nødvendig. Tailwind CSS Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 3 av 4.
Hvor lang tid tar leksjonen «Deres første Tailwind-side»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne Tailwind CSS Academy-leksjonen?
Ja. Alle Tailwind CSS Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- Utility-first CSS forklart
- Installere og konfigurere Tailwind
- Deres første Tailwind-side
- Tailwind kontra tradisjonell CSS