Šajā rakstā ir sniegta procedūra, kā kontrolēt elementa fontu saimi, izmantojot Tailwind utilītas.
Kā kontrolēt elementa fontu saimi, izmantojot Tailwind utilītas?
Lai kontrolētu elementa fontu saimi programmā Tailwind, elementam ir jānodrošina šāda utilīta:
fonts- { fontu saime }
Ir trīs noklusējuma fontu saimes, kuras var iestatīt, izmantojot iepriekš sniegto utilītu. Tie ietver ' serifs ',' bez ', un ' mono ”.
Izmantosim šīs fontu saimes demonstrācijā, izmantojot ' fonts-{fontu saime} ” klasē, lai redzētu, kā tas darbojas:
< div klasē = ' font-serif rounded-xl shadow-lg text-center py-2 my-2 bg-green-100 ' >
Šī ir FONT-SERIF saime
< / div >
< div klasē = ' font-sans rounded-xl shadow-lg text-center py-2 my-2 bg-blue-100' >
Šī ir FONT-SANS saime
< / div >
< div klasē = 'font-mono rounded-xl shadow-lg text-center py-2 my-2 bg-red-100' >
Šī ir FONT-MONO ģimene
< / div >
Iepriekš minētā koda skaidrojums ir šāds:
- Ir trīs div elementi, kas izveidoti, izmantojot ' ” un tiek nodrošināti ar dažādām fontu saimēm.
- ' fonts-{family} ” klase nodrošinās norādīto fontu saimi elementa tekstam.
- ' noapaļots-xl ” klase div elementa stūrus padarīs apaļus.
- ' ēna-lg ” klase nodrošinās lielu ēnu div elementam.
- ' teksta centrs ” līdzinās tekstu elementa centram.
- ' py-2 ' un ' mans-2 'nodarbības nodrošinās' 8 pikseļi ” polsterējums un piemale elementa augšējā un apakšējā virzienā.
- ' bg-{color}-{number} ” klase ir atbildīga par elementa fona iestatīšanu norādītajā krāsā.
No izvades ir skaidrs, ka katram elementam ir atšķirīga fontu saime:
Mēs varam arī dinamiski mainīt elementa fontu saimi, izmantojot kursora novietošanas funkciju. Ilustrācijai izmantojiet tālāk norādīto kodu:
< div klasē = 'my-2 rounded-xl bg-slate-100 py-2 text-center font-mono shadow-lg hover:font-serif' >Pēc noklusējuma šī ir FONT-MONO saime< / div >Iepriekš sniegtajā kodā ' virzīt kursoru: font-{family} ” utilīta ir atbildīga par elementa fontu saimes maiņu, tiklīdz peles kursors atrodas virs tā. Izvadē var redzēt, ka teksta fontu saime mainās, kad lietotājs novieto peles kursoru virs tā:
Tas viss attiecas uz elementa fontu saimes kontroli programmā Tailwind.
Secinājums
Programmā Tailwind elementam var piešķirt fontu saimi, izmantojot “ fonts-{family} ” klase. Ir trīs noklusējuma fontu saimes, ko nodrošina Tailwind, t.i. bez ',' serifs ', un ' mono ”. Lietotājs var arī mainīt elementa fontu saimi, mainot elementa stāvokli. Šajā rakstā ir sniegta procedūra Tailwind elementa fontu saimes kontrolei.