Com estilitzar els encapçalaments utilitzant l'estil base a Tailwind?

Com Estilitzar Els Encapcalaments Utilitzant L Estil Base A Tailwind



Els encapçalaments són components principals que s'utilitzen per crear títols i subtítols en una pàgina web. Ajuden a organitzar el contingut i faciliten la comprensió dels lectors de l'estructura del lloc web. A Tailwind CSS, tots els components d'encapçalament no tenen estil per defecte i utilitzen la mateixa mida i pes de lletra que el text normal a causa de la funció Preflight. Tanmateix, els usuaris poden afegir l'estil base per personalitzar l'aspecte dels encapçalaments segons les necessitats.

Aquest escrit il·lustrarà el mètode per estilitzar els encapçalaments afegint l'estil base a Tailwind.

Com estilitzar els encapçalaments amb l'estil base Tailwind?

Per estilitzar els encapçalaments a Tailwind, consulteu els passos proporcionats:







  • Obriu el fitxer CSS del projecte.
  • Al fitxer CSS, afegiu l'estil base als encapçalaments utilitzant el ' @capa ” directiva sota la “ @base del vent de cua; ” directiva.
  • Feu un programa HTML i utilitzeu-hi elements d'encapçalament.
  • Executeu el programa HTML i verifiqueu la sortida.

Pas 1: afegiu un estil base als encapçalaments del fitxer CSS



Primer, obriu el ' estil.css ” i afegiu-hi l'estil base als encapçalaments utilitzant el “ @capa ” directiva. Per exemple, hem afegit l'estil base als encapçalaments següents:



@vent de cua base ;

@capa base {
h1 {
@aplicar text-6xl ;
}

h2 {
@aplicar text-5xl ;
}

h3 {
@aplicar text-4xl ;
}

h4 {
@aplicar text-3xl ;
}

h5 {
@aplicar text-2xl ;
}
}

@vent de cua components ;
@vent de cua utilitats ;

Aquí:





  • @base de la capa {…} ” defineix una nova capa base i conté els estils dels components de l'encapçalament.
  • h1 { @apply text-6xl; } ' s'aplica el ' text-6xl 'classe d'utilitat a la ' h1 ” elements.
  • De la mateixa manera, “ h2 ”, “ h3 ”, “ h4 ”, i “ h5 Els elements tenen les seves mides de lletra establertes mitjançant ' @aplicar ” i les classes d'utilitat respectives (text-5xl, text-4xl, text-3xl i text-2xl).

Pas 2: creeu una pàgina web HTML amb encapçalaments

A continuació, feu el programa HTML i utilitzeu-hi els elements d'encapçalament. Aquí, hem utilitzat els següents elements d'encapçalament:



< cos >
< div classe = 'h-screen justify-center text-center bg-violet-400' >

< h1 > Títol 1 < / h1 >

< h2 > Títol 2 < / h2 >

< h3 > Títol 3 < / h3 >

< h4 > Títol 4 < / h4 >

< h5 > Títol 5 < / h5 >

< / div >
< / cos >

Pas 3: executeu el programa HTML

Finalment, executeu el programa HTML i visualitzeu la pàgina web per a la verificació:

La sortida anterior ha mostrat els encapçalaments com eren estils al fitxer CSS.

Conclusió

Per estilitzar els encapçalaments a Tailwind, obriu el fitxer CSS i afegiu l'estil base als encapçalaments utilitzant el ' @capa ” directiva sota la “ @base del vent de cua; ” directiva. A continuació, feu un programa HTML i utilitzeu-hi elements d'encapçalament. Finalment, visualitzeu la pàgina web HTML per verificar la sortida. Aquest escrit ha explicat el mètode per estilitzar els encapçalaments afegint l'estil base a Tailwind.