Ibinibigay ng artikulong ito ang pamamaraan para sa pagkontrol sa pamilya ng font ng isang elemento gamit ang mga utility ng Tailwind.
Paano Kontrolin ang Font Family ng isang Element Gamit ang Tailwind Utility?
Upang makontrol ang isang font family ng isang elemento sa Tailwind, ang sumusunod na utility ay kailangang ibigay sa elemento:
font- { pamilya ng font }
May tatlong default na pamilya ng font na maaaring itakda gamit ang utility na ibinigay sa itaas. Kabilang dito ang ' serif ',' wala ”, at “ mono ”.
Gamitin natin ang mga pamilya ng font na ito sa isang demonstrasyon gamit ang ' font-{font family} ” class para makita kung paano ito gumagana:
< div klase = ' font-serif rounded-xl shadow-lg text-center py-2 my-2 bg-green-100 ' >
Ito ay isang pamilya ng FONT-SERIF
< / div >
< div klase = ' font-sans rounded-xl shadow-lg text-center py-2 my-2 bg-blue-100' >
Ito ay isang pamilya ng FONT-SANS
< / div >
< div klase = 'font-mono rounded-xl shadow-lg text-center py-2 my-2 bg-red-100' >
Ito ay isang pamilyang FONT-MONO
< / div >
Ang paliwanag para sa code sa itaas ay ang mga sumusunod:
- Mayroong tatlong elemento ng div na nilikha gamit ang ' ” at binibigyan ng iba't ibang pamilya ng font.
- Ang ' font-{family} Ang klase ng ” ay magbibigay ng tinukoy na pamilya ng font sa teksto sa elemento.
- Ang ' bilugan-xl Ang klase ay gagawing bilog ang mga sulok ng elemento ng div.
- Ang ' anino-lg Ang klase ay magbibigay ng malaking anino sa elemento ng div.
- Ang ' text-center ” ay ihanay ang teksto sa gitna ng elemento.
- Ang ' py-2 'at' aking-2 'magbibigay ang mga klase' 8px ” padding at margin sa itaas at ibabang direksyon ng elemento.
- Ang ' bg-{color}-{number} Ang klase ay responsable para sa pagtatakda ng background ng elemento sa tinukoy na kulay.
Mula sa output, malinaw na ang bawat elemento ay may iba't ibang pamilya ng font:
Maaari rin nating dynamic na baguhin ang font family ng isang elemento gamit ang hover function. Para sa paglalarawan, pumunta sa ibaba ng code:
< div klase = 'my-2 rounded-xl bg-slate-100 py-2 text-center font-mono shadow-lg hover:font-serif' >Ito ay isang FONT-MONO na pamilya sa pamamagitan ng Default< / div >Sa ibinigay na code sa itaas, ang ' hover: font-{family} ” Ang utility ay may pananagutan sa pagbabago ng pamilya ng font ng elemento sa sandaling mag-hover ang cursor ng mouse sa ibabaw nito. Makikita sa output na nagbabago ang pamilya ng font ng teksto kapag ini-hover ng user ang cursor ng mouse sa ibabaw nito:
Iyon ay tungkol sa pagkontrol sa pamilya ng font ng isang elemento sa Tailwind.
Konklusyon
Sa Tailwind, maaaring magtalaga ng isang elemento ng font family gamit ang “ font-{family} ” klase. May tatlong default na pamilya ng font na ibinigay ng Tailwind i.e. “ wala ',' serif ”, at “ mono ”. Maaari ding baguhin ng user ang font family ng isang elemento kapag nagbago ang estado ng isang elemento. Ang artikulong ito ay nagbigay ng pamamaraan para sa pagkontrol sa font family ng isang elemento sa Tailwind.