Ovaj zapis će ilustrirati metodu stiliziranja naslova dodavanjem osnovnog stila u Tailwindu.
Kako stilizirati naslove pomoću osnovnog stila Tailwind?
Da biste stilizirali naslove u Tailwindu, pogledajte navedene korake:
- Otvorite CSS datoteku projekta.
- U CSS datoteci dodajte osnovni stil naslovima pomoću ' @sloj ' direktiva pod ' @baza stražnjeg vjetra; ” direktiva.
- Napravite HTML program i koristite elemente naslova u njemu.
- Pokrenite HTML program i provjerite izlaz.
Korak 1: Dodajte osnovni stil naslovima u CSS datoteci
Prvo otvorite ' stil.css ' datoteku i dodajte osnovni stil naslovima u njoj koristeći ' @sloj ” direktiva. Na primjer, dodali smo osnovni stil sljedećim naslovima:
@stražni vjetar baza ;
@sloj baza {
h1 {
@primijeniti tekst-6xl ;
}
h2 {
@primijeniti tekst-5xl ;
}
h3 {
@primijeniti tekst-4xl ;
}
h4 {
@primijeniti tekst-3xl ;
}
h5 {
@primijeniti tekst-2xl ;
}
}
@stražni vjetar komponente ;
@stražni vjetar komunalije ;
Ovdje:
- “ @slojna baza { … } ” definira novi osnovni sloj i sadrži stilove za komponente naslova.
- “ h1 { @primijeni tekst-6xl; } ' primjenjuje ' tekst-6xl ' klasa korisnosti u ' h1 ' elementi.
- Slično, ' h2 ”, “ h3 ”, “ h4 ', i ' h5 ' elementi imaju svoje veličine fonta postavljene pomoću ' @primijeniti ” i odgovarajuće klase korisnosti (tekst-5xl, tekst-4xl, tekst-3xl i tekst-2xl).
Korak 2: Stvorite HTML web-stranicu koristeći naslove
Zatim napravite HTML program i koristite elemente naslova u njemu. Ovdje smo upotrijebili sljedeće elemente naslova:
< tijelo >
< div razreda = 'h-screen justify-center text-center bg-violet-400' >
< h1 > Naslov 1 < / h1 >
< h2 > Naslov 2 < / h2 >
< h3 > Naslov 3 < / h3 >
< h4 > Naslov 4 < / h4 >
< h5 > Naslov 5 < / h5 >
< / div >
< / tijelo >
Korak 3: Pokrenite HTML program
Na kraju pokrenite HTML program i pogledajte web stranicu radi provjere:
Gornji izlaz prikazao je naslove kao što su bili stilovi u CSS datoteci.
Zaključak
Da biste stilizirali naslove u Tailwindu, otvorite CSS datoteku i dodajte osnovni stil naslovima pomoću ' @sloj ' direktiva pod ' @baza stražnjeg vjetra; ” direktiva. Zatim napravite HTML program i u njemu upotrijebite elemente naslova. Na kraju, pogledajte HTML web stranicu da provjerite izlaz. Ovaj zapis objašnjava metodu stiliziranja naslova dodavanjem osnovnog stila u Tailwind.