Denne opskrivning vil illustrere metoden til at style overskrifter ved at tilføje basisstilen i Tailwind.
Hvordan styles overskrifter ved hjælp af basestil medvind?
For at style overskrifter i Tailwind, tjek de givne trin:
- Åbn projektets CSS-fil.
- I CSS-filen skal du tilføje basisstilen til overskrifterne ved hjælp af ' @lag '-direktivet under ' @medvindsbase; ' direktiv.
- Lav et HTML-program og brug overskriftselementer i det.
- Kør HTML-programmet og bekræft outputtet.
Trin 1: Tilføj basisstil til overskrifter i CSS-fil
Først skal du åbne ' style.css '-filen og tilføj basisstilen til overskrifterne i den ved hjælp af ' @lag ' direktiv. For eksempel har vi tilføjet basisstilen til følgende overskrifter:
@medvind grundlag ;
@lag grundlag {
h1 {
@ansøge tekst-6xl ;
}
h2 {
@ansøge tekst-5xl ;
}
h3 {
@ansøge tekst-4xl ;
}
h4 {
@ansøge tekst-3xl ;
}
h5 {
@ansøge tekst-2xl ;
}
}
@medvind komponenter ;
@medvind forsyningsselskaber ;
Her:
- “ @lags base { … } ” definerer et nyt basislag og indeholder typografierne for overskriftskomponenterne.
- “ h1 { @anvend tekst-6xl; } ' anvender ' tekst-6xl ' brugsklasse til ' h1 ' elementer.
- Tilsvarende ' h2 ', ' h3 ', ' h4 ', og ' h5 '-elementer har deres skriftstørrelse indstillet ved hjælp af ' @ansøge ” og respektive hjælpeklasser (text-5xl, text-4xl, text-3xl og text-2xl).
Trin 2: Opret HTML-webside ved hjælp af overskrifter
Lav derefter HTML-programmet og brug overskriftselementerne i det. Her har vi brugt følgende overskriftselementer:
< legeme >
< div klasse = 'h-screen justify-center text-center bg-violet-400' >
< h1 > Overskrift 1 < / h1 >
< h2 > Overskrift 2 < / h2 >
< h3 > Overskrift 3 < / h3 >
< h4 > Overskrift 4 < / h4 >
< h5 > Overskrift 5 < / h5 >
< / div >
< / legeme >
Trin 3: Kør HTML-programmet
Kør endelig HTML-programmet og se websiden for at bekræfte:
Ovenstående output har vist overskrifterne, som de var stilarter i CSS-filen.
Konklusion
For at style overskrifter i Tailwind skal du åbne CSS-filen og tilføje basisstilen til overskrifterne ved at bruge ' @lag '-direktivet under ' @medvindsbase; ' direktiv. Lav derefter et HTML-program og brug overskriftselementer i det. Til sidst skal du se HTML-websiden for at bekræfte outputtet. Denne opskrivning har forklaret metoden til at style overskrifter ved at tilføje basisstilen i Tailwind.