Denne oppskriften vil illustrere metoden for å style overskrifter ved å legge til basisstilen i Tailwind.
Hvordan style overskrifter ved å bruke basestil medvind?
For å style overskrifter i Tailwind, sjekk ut de gitte trinnene:
- Åpne CSS-filen til prosjektet.
- I CSS-filen legger du til basisstilen til overskriftene ved å bruke ' @lag '-direktivet under ' @medvind base; 'direktiv.
- Lag et HTML-program og bruk overskriftselementer i det.
- Kjør HTML-programmet og bekreft utdataene.
Trinn 1: Legg til basisstil til overskrifter i CSS-fil
Først åpner du ' style.css '-filen og legg til grunnstilen til overskriftene i den ved å bruke ' @lag 'direktiv. For eksempel har vi lagt til grunnstilen i følgende overskrifter:
@medvind utgangspunkt ;
@lag utgangspunkt {
h1 {
@søke om tekst-6xl ;
}
h2 {
@søke om tekst-5xl ;
}
h3 {
@søke om tekst-4xl ;
}
h4 {
@søke om tekst-3xl ;
}
h5 {
@søke om tekst-2xl ;
}
}
@medvind komponenter ;
@medvind verktøy ;
Her:
- ' @lagsbase { … } ” definerer et nytt basislag og inneholder stilene for overskriftskomponentene.
- ' h1 { @apply text-6xl; } ' gjelder ' tekst-6xl ' nytteklassen til ' h1 'elementer.
- På samme måte, ' h2 ', ' h3 ', ' h4 ', og ' h5 '-elementer har skriftstørrelsen angitt med ' @søke om ” og respektive verktøyklasser (text-5xl, text-4xl, text-3xl og text-2xl).
Trinn 2: Lag HTML-webside ved å bruke overskrifter
Lag deretter HTML-programmet og bruk overskriftselementene i det. Her har vi brukt følgende overskriftselementer:
< kropp >
< 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 >
< / kropp >
Trinn 3: Kjør HTML-programmet
Til slutt, kjør HTML-programmet og se nettsiden for bekreftelse:
Utdataene ovenfor har vist overskriftene slik de var stiler i CSS-filen.
Konklusjon
For å style overskrifter i Tailwind, åpne CSS-filen og legg til basisstilen til overskriftene ved å bruke ' @lag '-direktivet under ' @medvind base; 'direktiv. Lag deretter et HTML-program og bruk overskriftselementer i det. Til slutt, se HTML-nettsiden for å bekrefte utdataene. Denne oppskriften har forklart metoden for å style overskrifter ved å legge til basisstilen i Tailwind.