Acest articol va ilustra metoda de stilare a titlurilor prin adăugarea stilului de bază în Tailwind.
Cum să stilați titlurile folosind stilul de bază Tailwind?
Pentru a stila titlurile în Tailwind, consultați pașii furnizați:
- Deschideți fișierul CSS al proiectului.
- În fișierul CSS, adăugați stilul de bază la titluri folosind „ @strat „directiva în temeiul „ @baza vantului de coada; ” directivă.
- Creați un program HTML și folosiți elemente de titlu în el.
- Rulați programul HTML și verificați rezultatul.
Pasul 1: Adăugați stil de bază la titluri din fișierul CSS
Mai întâi, deschideți „ stil.css ” și adăugați stilul de bază la titlurile din acesta utilizând „ @strat ” directivă. De exemplu, am adăugat stilul de bază la următoarele titluri:
@vânt de coadă baza ;
@strat baza {
h1 {
@aplica text-6xl ;
}
h2 {
@aplica text-5xl ;
}
h3 {
@aplica text-4xl ;
}
h4 {
@aplica text-3xl ;
}
h5 {
@aplica text-2xl ;
}
}
@vânt de coadă componente ;
@vânt de coadă utilitati ;
Aici:
- „ @layer de bază { … } ” definește un nou strat de bază și conține stilurile pentru componentele de titlu.
- „ h1 { @apply text-6xl; } ' se aplică ' text-6xl „clasa de utilitate la „ h1 ” elemente.
- În mod similar, „ h2 ”, “ h3 ”, “ h4 ', și ' h5 ” elementele au dimensiunile fontului setate folosind „ @aplica ” și clasele de utilitate respective (text-5xl, text-4xl, text-3xl și text-2xl).
Pasul 2: Creați o pagină web HTML folosind titluri
Apoi, creați programul HTML și utilizați elementele de titlu din el. Aici, am folosit următoarele elemente de titlu:
< corp >
< div clasă = „h-screen justify-center text-center bg-violet-400” >
< h1 > Titlul 1 < / h1 >
< h2 > Titlul 2 < / h2 >
< h3 > Titlul 3 < / h3 >
< h4 > Titlul 4 < / h4 >
< h5 > Titlul 5 < / h5 >
< / div >
< / corp >
Pasul 3: Rulați programul HTML
În cele din urmă, rulați programul HTML și vizualizați pagina web pentru verificare:
Ieșirea de mai sus a afișat titlurile așa cum erau stiluri în fișierul CSS.
Concluzie
Pentru a stila titlurile în Tailwind, deschideți fișierul CSS și adăugați stilul de bază la titluri folosind „ @strat „directiva în temeiul „ @baza vantului de coada; ” directivă. Apoi, creați un program HTML și utilizați elemente de titlu în el. În cele din urmă, vizualizați pagina web HTML pentru a verifica rezultatul. Acest articol a explicat metoda de stilare a titlurilor prin adăugarea stilului de bază în Tailwind.