See kirjutis illustreerib pealkirjade stiilimismeetodit, lisades Tailwindis põhistiili.
Kuidas kujundada pealkirju kasutades põhistiili Tailwind?
Pealkirjade stiilimiseks Tailwindis vaadake etteantud samme:
- Avage projekti CSS-fail.
- Lisage CSS-failis päistele põhistiil, kasutades ' @kiht ' direktiiv ' @tailwind base; ” direktiiv.
- Tehke HTML programm ja kasutage selles pealkirja elemente.
- Käivitage HTML-programm ja kontrollige väljundit.
1. samm: lisage CSS-faili pealkirjadele põhistiil
Kõigepealt avage ' stiil.css ” faili ja lisage selles olevatele pealkirjadele põhistiil, kasutades „ @kiht ” direktiiv. Näiteks oleme lisanud põhistiili järgmistele pealkirjadele:
@tailtuul alus ;
@kiht alus {
h1 {
@rakendus tekst-6xl ;
}
h2 {
@rakendus tekst-5xl ;
}
h3 {
@rakendus tekst-4xl ;
}
h4 {
@rakendus tekst-3xl ;
}
h5 {
@rakendus tekst-2xl ;
}
}
@tailtuul komponendid ;
@tailtuul kommunaalteenused ;
Siin:
- “ @kihi alus { … } ” määratleb uue aluskihi ja sisaldab pealkirjakomponentide stiile.
- “ h1 { @rakenda teksti-6xl; } ' rakendab ' tekst-6xl ' kasuliku klassi ' h1 ” elemente.
- Samamoodi ' h2 ”, “ h3 ”, „ h4 ”, ja „ h5 ' elementide fondisuurused on määratud kasutades ' @rakendus ” ja vastavad utiliidiklassid (tekst-5xl, tekst-4xl, tekst-3xl ja tekst-2xl).
2. samm: looge pealkirjade abil HTML-i veebileht
Seejärel looge HTML-programm ja kasutage selles olevaid pealkirja elemente. Siin oleme kasutanud järgmisi pealkirjaelemente:
< keha >
< div klass = 'h-screen justify-center text-center bg-violet-400' >
< h1 > Pealkiri 1 < / h1 >
< h2 > 2. pealkiri < / h2 >
< h3 > 3. pealkiri < / h3 >
< h4 > 4. pealkiri < / h4 >
< h5 > 5. pealkiri < / h5 >
< / div >
< / keha >
3. samm: käivitage HTML-programm
Lõpuks käivitage HTML-programm ja vaadake kinnitamiseks veebilehte:
Ülaltoodud väljund on kuvanud pealkirjad CSS-faili stiilidena.
Järeldus
Pealkirjade stiilimiseks Tailwindis avage CSS-fail ja lisage pealkirjadele põhistiil, kasutades ' @kiht ' direktiiv ' @tailwind base; ” direktiiv. Seejärel looge HTML-programm ja kasutage selles pealkirja elemente. Lõpuks vaadake väljundi kontrollimiseks HTML-i veebilehte. See kirjutis on selgitanud stiilipealkirjade meetodit, lisades Tailwindis põhistiili.