Ovaj će članak pružiti vodič za stiliziranje teksta u Tailwindu pomoću sljedećeg nacrta:
- Koristite klasu poravnanja teksta
- Omogućite boje tekstualnom sadržaju
- Koristite različite obitelji fontova
- Uključite podcrtane ukrase u tekst
- Navedite uvlake u tekstu
Kako koristiti klasu poravnanja teksta u Tailwindu?
Prilikom stiliziranja sadržaja teksta, pozicioniranje teksta jednako je važno kao i dekoracija. Ako tekst nije pravilno poravnat, cijeli će dizajn web stranice izgledati čudno. Za poravnavanje teksta u Tailwindu koristi se sljedeća klasa:
tekst- { poravnanje }
Opcije poravnanja uključuju ' centar ', ' lijevo ', ' pravo ', i ' opravdati ”. Razumimo svako od ovih usklađivanja pomoću demonstracije u nastavku:
< str razreda = 'text-center bg-slate-200' > Ovo je primjer teksta i isporučuje se s poravnanjem TEKSTA SREDIŠTA. < / str >
< br >
< str razreda = 'tekst-desno bg-slate-200' > Ovo je primjer teksta i isporučuje se s DESNIM poravnanjem TEKSTA. < / str >
< br >
< str razreda = 'tekst-lijevo bg-slate-200' > Ovo je primjer teksta i isporučuje se s LIJEVIM poravnanjem TEKSTA. < / str >
< br >
< str razreda = 'text-justify bg-slate-200' > Ovo je primjer teksta i isporučuje se s poravnanjem TEXT JUSTIFY. < / str >
Objašnjenje gornjeg koda je sljedeće:
- četiri “ str ” elementi se stvaraju i odvajaju prijelomom retka.
- Tekst četiri p elementa poravnat je na određeni položaj pomoću ' tekst-{poravnanje} ” razred.
- ' bg-{boja}-{broj} ' klasa daje boju pozadine za svaki ' str ” element.
Izlaz
U izlazu ispod može se vidjeti kako svaka od klasa poravnanja utječe na položaj teksta. Možete vidjeti da je tekst prvog elementa poravnat kao centar, drugog kao desno, trećeg kao lijevo, a četvrti element prikazuje opravdani tekst:
Kako dati boju tekstualnom sadržaju u Tailwindu?
Boja igra važnu ulogu u oblikovanju tekstualnog sadržaja elementa. Ako nije odabrana odgovarajuća boja, tekst može postati teško čitljiv. To će negativno utjecati na dizajn izgleda. Da biste postavili boju teksta u Tailwindu, upotrijebite donju klasu:
tekst- { boja } - { broj }U gore definiranoj sintaksi, korisnik mora unijeti naziv boje nakon kojeg slijedi broj koji će biti odgovoran za nijansu navedene boje.
Demonstracija u nastavku ima tri ' str ” elementi koji su stilizirani korištenjem različitih klasa boja teksta:
< str razreda = 'text-violet-500 text-center' > Ovo je tekst ljubičaste boje < / str >< str razreda = 'text-red-500 text-center' > Ovo je crveno obojeni tekst < / str >
< str razreda = 'text-green-500 text-center' > Ovo je tekst zelene boje < / str >
Klase koje se koriste u gornjem kodu su sljedeće:
- Prvi ' str ” element je ljubičaste boje koristeći “ tekst-{boja}-{broj} ” razred.
- Drugi i treći' str ” elementi su opremljeni crvenom i zelenom bojom na isti način.
- ' tekst-centar ” klasa postavlja tekstualni sadržaj u središte elementa.
Izlaz
Iz donjeg izlaza jasno je da se zadana crna boja teksta mijenja u navedene boje pomoću klase text-{color}-{number}:
Kako koristiti različite obitelji fontova u Tailwindu?
Font tekstualnog elementa može se koristiti za naglašavanje određenog teksta. Svaki font ima svoje karakteristike. Da biste promijenili font elementa u Tailwindu, upotrijebite sljedeću klasu:
font- { obitelj }Tailwind nudi tri zadane obitelji fontova, tj. bez ', ' serif ', i ' mono ”. Svaka od ovih obitelji fontova ima drugačiji stil fonta.
Slično tome, ' font-{weight} ” klasa se može koristiti za podebljavanje, svijetlost ili normalnost teksta. Iskoristimo demonstraciju za pružanje težine fonta različitim obiteljima fontova u Tailwindu:
< str razreda = 'font-mono font-extrabold text-center' > Ovo je ekstra podebljani tekst u fontu MONO < / str >< str razreda = 'font-serif font-semibold središte teksta' > Ovo je polu podebljani tekst u fontu SERIF < / str >
< str razreda = 'font-sans font-extralight text-center' > Ovo je ekstra lagani tekst u fontu SANS < / str >
Objašnjenje koda:
- Troje ' str 'elemente pružaju obitelji fontova 'mono', 'serf' i 'sans' koristeći ' font-{obitelj} ” razred.
- Slično, tri ' str ' elementi su navedeni kao ' extrabold ', ' poludebljano ', i ' extralight ” težine fonta pomoću “ font-{weight} ” razred.
- Svi ovi elementi koriste ' tekst-centar ” koja postavlja tekst u središte elementa.
Izlaz
Dani izlaz pokazuje da svaki ' str ” element ima drugu obitelj fontova i težinu fontova:
Kako staviti podcrtane ukrase na tekst u vjetru u stražnji dio?
Elementi teksta također se mogu stilizirati dodavanjem različitih vrsta podcrtavanja. Ovo se može koristiti za naglašavanje dijela teksta. Za podcrtavanje tekstualnog elementa koristi se sljedeća klasa:
naglasiti ukras- { stil }Riječ ' naglasiti ' daje osnovnu crtu elementu, a ' ukras-{stil} ” klasa se koristi za pružanje različitih stilova podcrtanom. Shvatimo ovo pomoću demonstracije u nastavku:
< str razreda = ' podcrtani ukras-čvrsti tekst-centar' > Ovaj tekst ima puno podvlačenje < / str >< str razreda = ' podcrtani ukras-dvostruki tekst-centar' > Ovaj tekst je dvostruko podvučen < / str >
< str razreda = ' podcrtani ukras-valoviti tekst-centar' > Ovaj tekst ima valovito podvučeno < / str >
< str razreda = ' podcrtani ukras-točkasti tekst-centar' > Ovaj tekst ima točkasto podvučeno < / str >
U gornjem kodu postoje četiri ' str ' elementi koje pruža ' čvrsta ', ' dvostruko ', ' valovita ', i ' točkasta ” stilizirano podcrtano.
Izlaz:
Iz sljedećeg rezultata jasno je da su elementi stilizirani pomoću različitih podcrtanih klasa dekoracije:
Kako uvući tekst u Tailwind?
U svakom tekstualnom dokumentu, uvlake se koriste za oblikovanje tekstualnog sadržaja. Tailwind također nudi zadanu klasu za pružanje uvlake tekstualnog sadržaja koristeći sljedeću klasu:
uvlaka- { širina }Širina u gore definiranoj sintaksi odgovorna je za veličinu margine uvlake koja se daje tekstualnom sadržaju.
Stilizirajmo dva elementa teksta dodjeljujući im različite vrijednosti uvlake i pogledajmo rezultat:
< str razreda = ' alineja-4 py-12' > Ovo je ogledni tekst i pruža se s uvlačenjem pomoću klase 'uvlaka-4'. < / str >< str razreda = ' alineja-28 ' > Ovo je ogledni tekst i pruža se s uvlačenjem pomoću klase 'uvlaka-28'. < / str >
U gornjem kodu, dva ' str ” opremljeni su uvlačenjem širine “ 4 ” & “ 28 ” odnosno. Prvi element također ima ispunu od vrha do dna pomoću ' p-12 ” razred.
Izlaz:
Može se vidjeti u donjem izlazu da drugi element teksta ima veću marginu na početku teksta zbog veće širine uvlake:
To je sve o oblikovanju teksta pomoću Tailwinda.
Zaključak
Tailwind pruža različite klase za stiliziranje tekstualnih elemenata. Za stiliziranje teksta u Tailwindu, korisnik može upotrijebiti ' tekst-{boja}-{broj} ', ' tekst-{poravnanje} ', ' podcrtani ukras-{style} ', i ' uvlaka-{širina} ” razred. Ovaj članak pruža vodič za stiliziranje teksta korištenjem različitih klasa u Tailwindu.