Ang write-up na ito ay maglalarawan ng paraan sa pag-istilo ng mga heading sa pamamagitan ng pagdaragdag ng batayang istilo sa Tailwind.
Paano Mag-istilo ng Mga Heading Gamit ang Base Style Tailwind?
Upang mag-istilo ng mga heading sa Tailwind, tingnan ang ibinigay na mga hakbang:
- Buksan ang CSS file ng proyekto.
- Sa CSS file, idagdag ang base style sa mga heading gamit ang “ @layer 'direktiba sa ilalim ng' @tailwind base; ” direktiba.
- Gumawa ng HTML program at gumamit ng mga elemento ng heading dito.
- Patakbuhin ang HTML program at i-verify ang output.
Hakbang 1: Magdagdag ng batayang Estilo sa Mga Heading sa CSS File
Una, buksan ang ' style.css ” file at idagdag ang base style sa mga heading dito gamit ang “ @layer ” direktiba. Halimbawa, idinagdag namin ang base style sa mga sumusunod na heading:
@tailwind base ;
@layer base {
h1 {
@mag-apply teksto-6xl ;
}
h2 {
@mag-apply teksto-5xl ;
}
h3 {
@mag-apply teksto-4xl ;
}
h4 {
@mag-apply teksto-3xl ;
}
h5 {
@mag-apply teksto-2xl ;
}
}
@tailwind mga bahagi ;
@tailwind mga kagamitan ;
dito:
- “ @layer base { … } ” ay tumutukoy sa isang bagong base layer at naglalaman ng mga istilo para sa mga bahagi ng heading.
- “ h1 { @apply text-6xl; } ' nalalapat ang ' teksto-6xl ' utility class sa ' h1 ' mga elemento.
- Katulad nito, ' h2 ”, “ h3 ”, “ h4 ”, at “ h5 Ang mga elemento ay may mga laki ng font na nakatakda gamit ang ' @mag-apply ” at kani-kanilang mga klase ng utility (text-5xl, text-4xl, text-3xl, at text-2xl).
Hakbang 2: Gumawa ng HTML Web Page Gamit ang Mga Heading
Pagkatapos, gawin ang HTML program at gamitin ang mga elemento ng heading sa loob nito. Dito, ginamit namin ang mga sumusunod na elemento ng heading:
< katawan >
< div klase = 'h-screen justify-center text-center bg-violet-400' >
< h1 > Pamagat 1 < / h1 >
< h2 > Pamagat 2 < / h2 >
< h3 > Pamagat 3 < / h3 >
< h4 > Pamagat 4 < / h4 >
< h5 > Pamagat 5 < / h5 >
< / div >
< / katawan >
Hakbang 3: Patakbuhin ang HTML Program
Panghuli, patakbuhin ang HTML program at tingnan ang web page para sa pag-verify:
Ang output sa itaas ay nagpakita ng mga heading bilang mga estilo sa CSS file.
Konklusyon
Upang mag-istilo ng mga heading sa Tailwind, buksan ang CSS file, at idagdag ang base style sa mga heading gamit ang “ @layer 'direktiba sa ilalim ng' @tailwind base; ” direktiba. Pagkatapos, gumawa ng HTML program at gumamit ng mga elemento ng heading dito. Panghuli, tingnan ang HTML web page upang i-verify ang output. Ipinaliwanag ng write-up na ito ang paraan sa pag-istilo ng mga heading sa pamamagitan ng pagdaragdag ng base style sa Tailwind.