See artikkel annab juhendi teksti stiili kujundamiseks Tailwindis, kasutades järgmist ülevaadet:
- Kasutage teksti joondamise klassi
- Pakkuge teksti sisule värve
- Kasutage erinevaid fondiperekondi
- Lisage tekstile allajoonitud kaunistused
- Tehke tekstile taanded
Kuidas kasutada teksti joondamise klassi Tailwindis?
Teksti sisu kujundamisel on teksti paigutus sama oluline kui kaunistus. Kui tekst pole õigesti joondatud, näeb kogu veebilehe kujundus veider välja. Teksti joondamiseks Tailwindis kasutatakse järgmist klassi:
tekst- { joondus }
Joondamisvalikud hõlmavad ' Keskus ', ' vasakule ', ' õige ”, ja „ õigustada ”. Mõistame kõiki neid joondusi, kasutades allolevat demonstratsiooni:
< lk klass = 'text-center bg-slate-200' > See on näidistekst ja see on varustatud TEKSTIKESKUSE joondusega. < / lk >
< br >
< lk klass = 'text-right bg-slate-200' > See on näidistekst ja see on varustatud TEKSTI PAREMA joondusega. < / lk >
< br >
< lk klass = 'text-left bg-slate-200' > See on näidistekst ja see on varustatud TEKSTI VASAKU joondusega. < / lk >
< br >
< lk klass = 'text-justify bg-slate-200' > See on näidistekst ja see on varustatud joondusega TEXT JUSTIFY. < / lk >
Ülaltoodud koodi selgitus on järgmine:
- Neli ' lk ” elemendid luuakse ja eraldatakse reavahetusega.
- Nelja p elemendi tekst joondatakse kindlasse kohta, kasutades ' tekst-{joondus} ” klass.
- ' bg-{color}-{number} ” klass pakub igale” taustavärvi lk ” element.
Väljund
Allolevas väljundis on näha, kuidas iga joondusklass mõjutab teksti positsiooni. Näete, et esimese elemendi tekst on joondatud keskele, teine paremale, kolmas vasakule ja neljas element näitab joondatud teksti:
Kuidas pakkuda Tailwindis tekstisisule värvi?
Värvil on oluline osa elemendi teksti sisu kujundamisel. Kui sobivat värvi ei valita, võib tekst muutuda raskesti loetavaks. See mõjutab paigutuse kujundust negatiivselt. Tailwindis teksti värvi määramiseks kasutage allolevat klassi:
tekst- { värvi } - { number }Ülalmääratletud süntaksis peab kasutaja sisestama värvi nime, millele järgneb number, mis vastutab määratud värvi varjundi eest.
Allpool esitatud esitlusel on kolm ' lk ” elemendid, mis on kujundatud erinevate tekstivärviklasside abil:
< lk klass = 'text-violet-500 text-center' > See on lilla värvi tekst < / lk >< lk klass = 'text-red-500 text-center' > See on punase värvi tekst < / lk >
< lk klass = 'tekst-roheline-500 tekstikeskus' > See on rohelise värvi tekst < / lk >
Ülaltoodud koodis kasutatavad klassid on järgmised:
- Esimene ' lk ' element on varustatud violetse värviga, kasutades ' tekst-{värv}-{number} ” klass.
- Teine ja kolmas' lk ” elemendid on varustatud punase ja rohelise värviga, kasutades sama meetodit.
- ' tekstikeskus ” klass positsioneerib teksti sisu elemendi keskele.
Väljund
Allolevast väljundist on selge, et teksti vaikimisi must värv muudetakse klassi text-{color}-{number} abil määratud värvideks:
Kuidas Tailwindis erinevaid fondiperekondi kasutada?
Tekstielemendi fonti saab kasutada konkreetse teksti rõhutamiseks. Igal fondil on oma omadused. Tailwindis elemendi fondi muutmiseks kasutage järgmist klassi:
font- { perekond }Tailwind pakub kolme vaikefondiperekonda, st. ilma ', ' serif ”, ja „ mono ”. Igal neist fondiperekondadest on erinev kirjastiil.
Samamoodi on ' font-{weight} ” klassi saab kasutada teksti paksuks, heledaks või normaalseks muutmiseks. Kasutame demonstratsiooni, et pakkuda Tailwindi erinevatele fondiperekondadele fondi kaalu:
< lk klass = 'font-mono font-extrabold text-center' > See on eriti paks tekst fontis MONO < / lk >< lk klass = ' font-serif font-semibold text-center' > See on poolpaks tekst fontis SERIF < / lk >
< lk klass = ' font-sans font-extralight text-center' > See on SANS-fondi eriti kerge tekst < / lk >
Koodi selgitus:
- Kolm ' lk ' elemente pakuvad 'mono', 'serf' ja 'sans' fondipered, kasutades ' font-{perekond} ” klass.
- Samamoodi kolm ' lk ' elemendid on esitatud kui ' ekstrabold ', ' poolpaks ', ja ' ekstravalgus ' fondi kaalud kasutades ' font-{weight} ” klass.
- Kõik need elemendid kasutavad ' tekstikeskus ” klass, mis asetab teksti elemendi keskele.
Väljund
Antud väljund näitab, et iga ' lk ” elemendil on erinev fondiperekond ja fondi kaal:
Kuidas pakkuda Tailwindis tekstile allajoonitud kaunistusi?
Tekstielemente saab ka stiilida, lisades erinevat tüüpi allajooni. Seda saab kasutada tekstiosa rõhutamiseks. Tekstielemendile allajoonimiseks kasutatakse järgmist klassi:
joon alla kaunistus- { stiilis }Sõna ' joon alla ' annab elemendile põhilise allajoonimise ja ' dekoratsioon-{style} ” klassi kasutatakse allajoonimisele erinevate stiilide andmiseks. Mõistame seda allpool esitatud demonstratsiooni abil:
< lk klass = ' alla joonitud kaunistus - ühtne tekst - keskpunkt' > Sellel tekstil on kindel allajoon < / lk >< lk klass = ' allakriipsutamine - topelttekstikeskus' > Sellel tekstil on topelt allajoon < / lk >
< lk klass = ' allajoonitud kaunistus - laineline tekst - keskus' > Sellel tekstil on laineline allajoon < / lk >
< lk klass = 'kriipsutage alla dekoratsiooni-punktiga tekstikeskus' > Sellel tekstil on punktiirjoon < / lk >
Ülaltoodud koodis on neli ' lk elemendid, mille pakub tahke ', ' kahekordne ', ' laineline ”, ja „ täpiline ” stiilis allajoonimised.
Väljund:
Järgmisest väljundist on selge, et elemendid on kujundatud erinevate allajoonitud dekoratsiooniklasside abil:
Kuidas Tailwindis tekstile taande teha?
Igas tekstidokumendis kasutatakse teksti sisu vormindamiseks taandeid. Tailwind pakub ka vaikeklassi tekstisisu taande lisamiseks, kasutades järgmist klassi:
taane- { laius }Ülalmääratletud süntaksi laius vastutab tekstisisule antud taandeveerise suuruse eest.
Stiilige kaks tekstielementi, määrates neile erinevad taandeväärtused, ja vaatame tulemust:
< lk klass = ' taane-4 py-12' > See on näidistekst ja see on varustatud taandega, kasutades klassi 'taane-4'. < / lk >< lk klass = 'taane-28' > See on näidistekst ja see on varustatud taandega, kasutades klassi 'taane-28'. < / lk >
Ülaltoodud koodis on kaks ' lk ' on varustatud laiuse taandega ' 4 ' & ' 28 ” vastavalt. Esimene element on varustatud ka ülevalt-alt polsterdusega, kasutades ' p-12 ” klass.
Väljund:
Allolevast väljundist on näha, et teisel tekstielemendil on teksti alguses suurem veeris suurema taande laiuse tõttu:
See kõik puudutab teksti stiili kujundamist Tailwindi abil.
Järeldus
Tailwind pakub tekstielementide stiilimiseks erinevaid klasse. Teksti stiiliks Tailwindis saab kasutaja kasutada ' tekst-{värv}-{number} ', ' tekst-{joondus} ', ' kriipsu alla kaunistus-{style} ”, ja „ taane-{width} ” klass. See artikkel on andnud juhendi teksti kujundamiseks, kasutades Tailwindi erinevaid klasse.