Magbibigay ang artikulong ito ng gabay para sa pag-istilo ng teksto sa Tailwind gamit ang sumusunod na balangkas:
- Gumamit ng Text Align Class
- Magbigay ng Mga Kulay sa Nilalaman ng Teksto
- Gumamit ng Iba't ibang Pamilya ng Font
- Magbigay ng Underline Dekorasyon sa Text
- Magbigay ng mga Indentasyon sa Teksto
Paano Gamitin ang Text Align Class sa Tailwind?
Habang ini-istilo ang nilalaman ng teksto, ang pagpoposisyon ng teksto ay kasinghalaga ng dekorasyon. Kung ang teksto ay hindi maayos na nakahanay, ang buong disenyo ng webpage ay magmumukhang kakaiba. Upang ihanay ang teksto sa Tailwind, ginagamit ang sumusunod na klase:
text- { pagkakahanay }
Kasama sa mga pagpipilian sa pagkakahanay ang ' gitna ',' umalis ',' tama ”, at “ bigyang-katwiran ”. Unawain natin ang bawat isa sa mga pagkakahanay na ito gamit ang demonstrasyon sa ibaba:
< p klase = ' text-center bg-slate-200' > Ito ay isang sample na Text at ito ay ibinigay kasama ng TEXT CENTER alignment. < / p >
< br >
< p klase = ' text-right bg-slate-200' > Ito ay isang sample na Text at ito ay binibigyan ng TEXT RIGHT alignment. < / p >
< br >
< p klase = ' text-left bg-slate-200' > Ito ay isang sample na Text at ito ay ibinigay kasama ng TEXT LEFT alignment. < / p >
< br >
< p klase = ' text-justify bg-slate-200' > Ito ay isang sample na Text at ito ay ibinigay kasama ang TEXT JUSTIFY alignment. < / p >
Ang paliwanag ng code sa itaas ay ang mga sumusunod:
- apat' p ” ang mga elemento ay nilikha at pinaghihiwalay ng isang line break.
- Ang teksto ng apat na elemento ng p ay nakahanay sa isang tiyak na posisyon gamit ang ' text-{alignment} ” klase.
- Ang ' bg-{color}-{number} 'Ang klase ay nagbibigay ng kulay ng background para sa bawat ' p ' elemento.
Output
Makikita sa output sa ibaba kung paano nakakaapekto ang bawat isa sa mga klase ng pagkakahanay sa posisyon ng teksto. Makikita mo na ang teksto ng unang elemento ay nakahanay bilang gitna, ang pangalawa bilang kanan, ang pangatlo bilang kaliwa, at ang ikaapat na elemento ay nagpapakita ng makatwirang teksto:
Paano Magbigay ng Kulay sa Nilalaman ng Teksto sa Tailwind?
Ang kulay ay gumaganap ng isang mahalagang bahagi sa pag-istilo ng nilalaman ng teksto ng isang elemento. Kung ang isang naaangkop na kulay ay hindi pinili, ang teksto ay maaaring maging mahirap basahin. Ito ay negatibong makakaapekto sa disenyo ng layout. Upang itakda ang kulay ng isang text sa Tailwind, gamitin ang klase na ibinigay sa ibaba:
text- { kulay } - { numero }Sa natukoy na syntax sa itaas, kailangang ibigay ng user ang pangalan ng kulay na sinusundan ng isang numero na magiging responsable para sa lilim ng tinukoy na kulay.
Ang demonstrasyon na ibinigay sa ibaba ay may tatlong ' p ” mga elemento na naka-istilo gamit ang iba't ibang klase ng kulay ng teksto:
< p klase = ' text-violet-500 text-center' > Ito ay isang Violet Colored Text < / p >< p klase = ' text-red-500 text-center' > Ito ay isang Red Colored Text < / p >
< p klase = ' text-green-500 text-center' > Ito ay isang Green Colored Text < / p >
Ang mga klase na ginamit sa code sa itaas ay ang mga sumusunod:
- Ang una ' p Ang elementong ” ay binibigyan ng kulay violet gamit ang “ text-{color}-{number} ” klase.
- Ang pangalawa at pangatlo' p Ang mga elemento ay binibigyan ng pula at berdeng kulay gamit ang parehong paraan.
- Ang ' text-center ” ipinoposisyon ng klase ang nilalaman ng teksto sa gitna ng elemento.
Output
Mula sa output sa ibaba, malinaw na ang default na itim na kulay ng teksto ay binago sa tinukoy na mga kulay gamit ang text-{color}-{number} class:
Paano Gumamit ng Iba't ibang Mga Pamilya ng Font sa Tailwind?
Ang font ng isang elemento ng teksto ay maaaring gamitin upang bigyang-diin ang isang partikular na teksto. Ang bawat font ay may sariling katangian. Upang baguhin ang font ng isang elemento sa Tailwind, gamitin ang sumusunod na klase:
font- { pamilya }Nagbibigay ang Tailwind ng tatlong default na pamilya ng font i.e. ' wala ',' serif ”, at “ mono ”. Ang bawat isa sa mga pamilya ng font na ito ay may iba't ibang istilo ng font.
Katulad nito, ang ' font-{weight} ” class ay maaaring gamitin upang gawing bold, magaan, o normal ang teksto. Gumamit tayo ng isang demonstrasyon para magbigay ng font-weight sa iba't ibang pamilya ng font sa Tailwind:
< p klase = 'font-mono font-extrabold text-center' > Ito ay isang Extra Bold Text sa Font MONO < / p >< p klase = ' font-serif font-semibold text-center' > Ito ay isang Semi Bold na Teksto sa Font SERIF < / p >
< p klase = ' font-sans font-extralight text-center' > Isa itong Extra Light Text sa Font SANS < / p >
Paliwanag para sa code:
- Ang tatlo ' p Ang mga elemento ay ibinibigay ng mga pamilya ng font na 'mono', 'serf', at 'sans' gamit ang ' font-{family} ” klase.
- Katulad nito, ang tatlong ' p Ang mga elemento ay ibinigay bilang ' extrabold ',' semibold ', at ang ' extralight ” mga timbang ng font gamit ang “ font-{weight} ” klase.
- Ang lahat ng mga elementong ito ay gumagamit ng ' text-center ” klase na naglalagay ng teksto sa gitna ng elemento.
Output
Ang ibinigay na output ay nagpapakita na ang bawat ' p ” ang elemento ay may ibang font family at font weights:
Paano Magbigay ng Underline Dekorasyon sa Teksto sa Tailwind?
Ang mga elemento ng teksto ay maaari ding i-istilo sa pamamagitan ng pagdaragdag ng iba't ibang uri ng mga salungguhit. Ito ay maaaring gamitin upang bigyang-diin ang isang bahagi ng isang teksto. Upang magbigay ng mga salungguhit sa isang elemento ng teksto, ginagamit ang sumusunod na klase:
salungguhit palamuti- { istilo }Ang salita ' salungguhit ' ay nagbibigay ng pangunahing salungguhit sa elemento at ang ' palamuti-{style} Ang klase ay ginagamit upang magbigay ng iba't ibang estilo sa salungguhit. Unawain natin ito gamit ang ibinigay na demonstrasyon sa ibaba:
< p klase = ' salungguhitan ang dekorasyon-solid na text-center' > May Solid Underline ang Tekstong ito < / p >< p klase = ' salungguhitan ang dekorasyon-double text-center' > Ang Tekstong ito ay may Double Underline < / p >
< p klase = ' salungguhitan ang dekorasyon-wavy na text-center' > Ang Tekstong ito ay may Wavy Underline < / p >
< p klase = ' salungguhitan ang dekorasyon-tuldok-tuldok na text-center' > Ang Tekstong ito ay may Dotted Underline < / p >
Sa code sa itaas, mayroong apat na ' p 'mga elemento na ibinibigay ng ' solid ',' doble ',' kulot ”, at “ may tuldok ” may istilong salungguhit.
Output:
Malinaw mula sa sumusunod na output na ang mga elemento ay na-istilo gamit ang iba't ibang mga klase ng dekorasyon na may salungguhit:
Paano Magbigay ng Mga Indentasyon sa Teksto sa Tailwind?
Sa anumang dokumento ng teksto, ang mga indentasyon ay ginagamit upang i-format ang nilalaman ng teksto. Nagbibigay din ang Tailwind ng default na klase upang magbigay ng indentasyon sa nilalaman ng teksto gamit ang sumusunod na klase:
indent- { lapad }Ang lapad sa natukoy na syntax sa itaas ay responsable para sa laki ng indentation margin na ibinigay sa nilalaman ng teksto.
Mag-istilo tayo ng dalawang elemento ng teksto sa pamamagitan ng pagtatalaga sa kanila ng magkakaibang mga halaga ng indentation at tingnan ang resulta:
< p klase = ' indent-4 py-12' > Ito ay isang sample na teksto at ito ay ibinigay kasama ng Indentation gamit ang 'indent-4' na klase. < / p >< p klase = 'indent-28' > Ito ay isang sample na teksto at ito ay ibinigay kasama ng Indentation gamit ang 'indent-28' na klase. < / p >
Sa code sa itaas, dalawang ' p 'ay ibinigay kasama ang indentation ng lapad ' 4 '&' 28 ” ayon sa pagkakabanggit. Ang unang elemento ay binibigyan din ng top-bottom padding gamit ang ' p-12 ” klase.
Output:
Makikita sa output sa ibaba na ang pangalawang elemento ng teksto ay may mas malaking margin sa simula ng teksto dahil sa mas malaking lapad ng indentation:
Iyon ay tungkol sa pag-istilo ng teksto gamit ang Tailwind.
Konklusyon
Nagbibigay ang Tailwind ng iba't ibang klase para sa pag-istilo ng mga elemento ng teksto. Upang i-istilo ang teksto sa Tailwind, maaaring gamitin ng user ang “ text-{color}-{number} ',' text-{alignment} ',' salungguhitan ang dekorasyon-{style} ”, at “ indent-{width} ” klase. Ang artikulong ito ay nagbigay ng gabay para sa pag-istilo ng teksto gamit ang iba't ibang klase sa Tailwind.