Ta zapis bo ponazoril metodo oblikovanja naslovov z dodajanjem osnovnega sloga v Tailwind.
Kako oblikovati naslove z osnovnim slogom Tailwind?
Če želite oblikovati naslove v Tailwindu, si oglejte podane korake:
- Odprite datoteko CSS projekta.
- V datoteki CSS dodajte osnovni slog naslovom z uporabo ' @plast ” direktive pod „ podstavek @tailwind; ” direktiva.
- Naredite program HTML in v njem uporabite elemente naslovov.
- Zaženite program HTML in preverite izpis.
1. korak: dodajte osnovni slog naslovom v datoteki CSS
Najprej odprite » style.css ' in dodajte osnovni slog naslovom v njej z uporabo ' @plast ” direktiva. Osnovni slog smo na primer dodali naslednjim naslovom:
@tailwind osnova ;
@plast osnova {
h1 {
@prijavi besedilo-6xl ;
}
h2 {
@prijavi besedilo-5xl ;
}
h3 {
@prijavi besedilo-4xl ;
}
h4 {
@prijavi besedilo-3xl ;
}
h5 {
@prijavi besedilo-2xl ;
}
}
@tailwind komponente ;
@tailwind pripomočki ;
Tukaj:
- “ @layer base { … } ” definira novo osnovno plast in vsebuje sloge za komponente naslova.
- “ h1 { @uporabi besedilo-6xl; } ' uporablja ' besedilo-6xl »razred uporabnosti v » h1 ” elementi.
- Podobno, ' h2 ”, “ h3 ”, “ h4 «, in » h5 » elementi imajo velikost pisave nastavljeno z » @prijavi ” in ustrezne razrede uporabnosti (besedilo-5xl, besedilo-4xl, besedilo-3xl in besedilo-2xl).
2. korak: Ustvarite spletno stran HTML z uporabo naslovov
Nato naredite program HTML in v njem uporabite elemente naslovov. Tu smo uporabili naslednje elemente naslova:
< telo >
< div razred = '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 >
< / telo >
3. korak: Zaženite program HTML
Na koncu zaženite program HTML in si oglejte spletno stran za preverjanje:
Zgornji rezultat je prikazal naslove, kot so bili slogi v datoteki CSS.
Zaključek
Če želite oblikovati naslove v Tailwindu, odprite datoteko CSS in dodajte osnovni slog naslovom z uporabo ' @plast ” direktive pod „ podstavek @tailwind; ” direktiva. Nato naredite program HTML in v njem uporabite elemente naslovov. Na koncu si oglejte spletno stran HTML, da preverite rezultat. V tem zapisu je razložena metoda oblikovanja naslovov z dodajanjem osnovnega sloga v Tailwind.