Tämä kirjoitus havainnollistaa menetelmää tyyliotsikoiden luomiseen lisäämällä perustyyli Tailwindissä.
Kuinka muotoilla otsikoita käyttämällä perustyyliä tailwindiä?
Voit muokata otsikoita Tailwindissä noudattamalla annettuja ohjeita:
- Avaa projektin CSS-tiedosto.
- Lisää CSS-tiedoston perustyyli otsikoihin käyttämällä ' @kerros ' direktiivi ' @tailwind base; ' direktiivi.
- Tee HTML-ohjelma ja käytä siinä otsikkoelementtejä.
- Suorita HTML-ohjelma ja tarkista tulos.
Vaihe 1: Lisää perustyyli otsikoihin CSS-tiedostossa
Avaa ensin ' tyyli.css '-tiedosto ja lisää perustyyli sen otsikoihin käyttämällä ' @kerros ' direktiivi. Olemme esimerkiksi lisänneet perustyylin seuraaviin otsikoihin:
@tailtuuli pohja ;
@kerros pohja {
h1 {
@Käytä teksti-6xl ;
}
h2 {
@Käytä teksti-5xl ;
}
h3 {
@Käytä teksti-4xl ;
}
h4 {
@Käytä teksti-3xl ;
}
h5 {
@Käytä teksti-2xl ;
}
}
@tailtuuli komponentit ;
@tailtuuli apuohjelmia ;
Tässä:
- ' @layer base { … } ” määrittää uuden peruskerroksen ja sisältää tyylit otsikkokomponenteille.
- ' h1 { @apply text-6xl; } ' soveltaa ' teksti-6xl 'hyötyluokka' h1 ”elementtejä.
- Samalla lailla, ' h2 ”, “ h3 ”, “ h4 ”, ja ” h5 ' elementtien kirjasinkoot on asetettu käyttämällä ' @Käytä ” ja vastaavat hyödyllisyysluokat (teksti-5xl, teksti-4xl, teksti-3xl ja teksti-2xl).
Vaihe 2: Luo HTML-verkkosivu otsikoiden avulla
Tee sitten HTML-ohjelma ja käytä siinä olevia otsikkoelementtejä. Tässä olemme käyttäneet seuraavia otsikkoelementtejä:
< kehon >
< div luokkaa = 'h-screen justify-center text-center bg-violet-400' >
< h1 > Otsikko 1 < / h1 >
< h2 > Otsikko 2 < / h2 >
< h3 > Otsikko 3 < / h3 >
< h4 > Otsikko 4 < / h4 >
< h5 > Otsikko 5 < / h5 >
< / div >
< / kehon >
Vaihe 3: Suorita HTML-ohjelma
Suorita lopuksi HTML-ohjelma ja tarkastele verkkosivua vahvistusta varten:
Yllä oleva tulos on näyttänyt otsikot sellaisina kuin ne olivat tyylejä CSS-tiedostossa.
Johtopäätös
Voit muotoilla otsikot Tailwindissä avaamalla CSS-tiedoston ja lisäämällä otsikoihin perustyylin käyttämällä ' @kerros ' direktiivi ' @tailwind base; ' direktiivi. Tee sitten HTML-ohjelma ja käytä siinä otsikkoelementtejä. Tarkista lopuksi tulos HTML-verkkosivulta. Tämä kirjoitus on selittänyt menetelmän tyyliotsikoiden luomiseen lisäämällä perustyyli Tailwindissä.