Dit artikel illustreert de methode om koppen op te maken door de basisstijl toe te voegen in Tailwind.
Hoe koppen te stylen met behulp van Base Style Tailwind?
Bekijk de gegeven stappen om koppen in Tailwind op te maken:
- Open het CSS-bestand van het project.
- Voeg in het CSS-bestand de basisstijl toe aan de koppen met behulp van de ' @laag ” richtlijn onder de “ @staartwind basis; ” richtlijn.
- Maak een HTML-programma en gebruik daarin kopelementen.
- Voer het HTML-programma uit en controleer de uitvoer.
Stap 1: Basisstijl toevoegen aan koppen in CSS-bestand
Open eerst de ' stijl.css ' en voeg de basisstijl toe aan de koppen erin met behulp van de ' @laag ” richtlijn. Zo hebben we de basisstijl toegevoegd aan de volgende rubrieken:
@rugwind baseren ;
@laag baseren {
h1 {
@toepassen tekst-6xl ;
}
h2 {
@toepassen tekst-5xl ;
}
h3 {
@toepassen tekst-4xl ;
}
h4 {
@toepassen tekst-3xl ;
}
h5 {
@toepassen tekst-2xl ;
}
}
@rugwind componenten ;
@rugwind nutsvoorzieningen ;
Hier:
- “ @layer basis { … } ” definieert een nieuwe basislaag en bevat de stijlen voor de kopcomponenten.
- “ h1 { @apply tekst-6xl; } ” geldt de “ tekst-6xl ”utiliteitsklasse naar de“ h1 ” elementen.
- Evenzo, ' h2 ”, “ h3 ”, “ h4 ', En ' h5 ” elementen hebben hun lettergrootte ingesteld met behulp van “ @toepassen ” en respectievelijke hulpprogrammaklassen (text-5xl, text-4xl, text-3xl en text-2xl).
Stap 2: maak een HTML-webpagina met behulp van koppen
Maak vervolgens het HTML-programma en gebruik daarin de kopelementen. Hier hebben we de volgende kopelementen gebruikt:
< lichaam >
< div klas = 'h-scherm rechtvaardigen-center text-center bg-violet-400' >
< h1 > Koptekst 1 < / h1 >
< h2 > Kop 2 < / h2 >
< h3 > Kop 3 < / h3 >
< h4 > Kop 4 < / h4 >
< h5 > Kop 5 < / h5 >
< / div >
< / lichaam >
Stap 3: voer het HTML-programma uit
Voer ten slotte het HTML-programma uit en bekijk de webpagina ter verificatie:
De bovenstaande uitvoer heeft de koppen weergegeven als stijlen in het CSS-bestand.
Conclusie
Om koppen op te maken in Tailwind, opent u het CSS-bestand en voegt u de basisstijl toe aan de koppen met behulp van de knop ' @laag ” richtlijn onder de “ @staartwind basis; ” richtlijn. Maak vervolgens een HTML-programma en gebruik daarin kopelementen. Bekijk ten slotte de HTML-webpagina om de uitvoer te verifiëren. Dit artikel heeft de methode uitgelegd om koppen op te maken door de basisstijl toe te voegen in Tailwind.