Ta članek bo zagotovil vodnik za oblikovanje besedila v Tailwindu z naslednjim orisom:
- Uporabite razred za poravnavo besedila
- Zagotovite barve besedilni vsebini
- Uporabite različne družine pisav
- Besedilu zagotovite podčrtane okraske
- Zagotovite vdolbine besedilu
Kako uporabiti razred za poravnavo besedila v Tailwindu?
Pri oblikovanju vsebine besedila je položaj besedila enako pomemben kot dekoracija. Če besedilo ni pravilno poravnano, bo celotna zasnova spletne strani videti nenavadno. Za poravnavo besedila v Tailwindu se uporablja naslednji razred:
besedilo- { poravnava }
Možnosti poravnave vključujejo » center ', ' levo ', ' prav «, in » utemeljiti ”. Razumejmo vsako od teh poravnav z uporabo spodnje predstavitve:
< str razred = 'text-center bg-slate-200' > To je vzorec besedila in je na voljo s poravnavo BESEDILO NA SREDINO. < / str >
< št >
< str razred = 'besedilo-desno bg-skrilavec-200' > To je vzorec besedila in je na voljo s poravnavo BESEDILA DESNO. < / str >
< št >
< str razred = 'besedilo-levo bg-skrilavec-200' > To je vzorec besedila in je na voljo s poravnavo BESEDILO LEVO. < / str >
< št >
< str razred = 'text-justify bg-slate-200' > To je vzorec besedila in je na voljo s poravnavo TEXT JUSTIFY. < / str >
Razlaga zgornje kode je naslednja:
- štiri' str ” elementi so ustvarjeni in ločeni s prelomom vrstice.
- Besedilo štirih elementov p je poravnano na določen položaj z uporabo ' besedilo-{poravnava} ” razred.
- ' bg-{barva}-{številka} ' zagotavlja barvo ozadja za vsak ' str ” element.
Izhod
V spodnjem rezultatu je razvidno, kako vsak od razredov poravnave vpliva na položaj besedila. Vidite lahko, da je besedilo prvega elementa poravnano na sredino, drugega kot desno, tretjega kot levo, četrti element pa prikazuje poravnano besedilo:
Kako zagotoviti barvo besedilni vsebini v Tailwindu?
Barva ima pomembno vlogo pri oblikovanju besedilne vsebine elementa. Če ni izbrane ustrezne barve, lahko postane besedilo težko berljivo. To bo negativno vplivalo na zasnovo postavitve. Če želite nastaviti barvo besedila v Tailwindu, uporabite spodnji razred:
besedilo- { barva } - { število }V zgoraj določeni sintaksi mora uporabnik vnesti ime barve, ki mu sledi številka, ki bo odgovorna za odtenek navedene barve.
Spodnja predstavitev ima tri ' str ” elementi, ki so oblikovani z uporabo različnih barvnih razredov besedila:
< str razred = 'besedilo-vijolično-500 središče besedila' > To je vijolično obarvano besedilo < / str >< str razred = 'besedilo-rdeča-500 središče besedila' > To je rdeče obarvano besedilo < / str >
< str razred = 'text-green-500 text-center' > To je zeleno obarvano besedilo < / str >
Razredi, uporabljeni v zgornji kodi, so naslednji:
- Prvi ' str ' je element vijolične barve z uporabo ' besedilo-{barva}-{število} ” razred.
- Drugi in tretji' str ” so elementi opremljeni z rdečo in zeleno barvo z uporabo iste metode.
- ' besedilno središče ” postavi besedilno vsebino na sredino elementa.
Izhod
Iz spodnjega rezultata je razvidno, da je privzeta črna barva besedila spremenjena v podane barve z uporabo razreda text-{color}-{number}:
Kako uporabljati različne družine pisav v Tailwindu?
Pisavo elementa besedila lahko uporabite za poudarjanje določenega besedila. Vsaka pisava ima svoje značilnosti. Če želite spremeniti pisavo elementa v Tailwindu, uporabite naslednji razred:
pisava- { družina }Tailwind ponuja tri privzete družine pisav, tj. brez ', ' serif «, in » mono ”. Vsaka od teh družin pisav ima drugačen slog pisave.
Podobno je ' pisava-{teža} ” lahko uporabite, da naredite besedilo krepko, svetlo ali običajno. Uporabimo predstavitev za zagotavljanje teže pisave različnim družinam pisav v Tailwindu:
< str razred = 'font-mono font-extrabold text-center' > To je zelo krepko besedilo v pisavi MONO < / str >< str razred = ' pisava-serif pisava-polkrepko središče besedila' > To je polkrepko besedilo v pisavi SERIF < / str >
< str razred = 'font-sans font-extralight text-center' > To je zelo lahko besedilo v pisavi SANS < / str >
Razlaga kode:
- Trije' str ” zagotavljajo družine pisav “mono”, “serf” in “sans” z uporabo pisava-{družina} ” razred.
- Podobno trije ' str » elementi so na voljo kot » ekstrakrepko ', ' polkrepko ', in ' ekstralahek ' teže pisave z uporabo ' pisava-{teža} ” razred.
- Vsi ti elementi uporabljajo ' besedilno središče ”, ki postavi besedilo v sredino elementa.
Izhod
Podani izhod kaže, da vsak ' str ” element ima drugačno družino pisav in težo pisave:
Kako zagotoviti podčrtane okraske besedilu v zadnjem vetru?
Besedilne elemente je mogoče oblikovati tudi z dodajanjem različnih vrst podčrtajev. To lahko uporabite za poudarjanje dela besedila. Za zagotavljanje podčrtajev besedilnemu elementu se uporablja naslednji razred:
podčrtaj dekoracija- { stil }Beseda ' podčrtaj ” zagotavlja osnovno podčrtanje elementa in dekoracija-{slog} ” se uporablja za zagotavljanje različnih slogov podčrtaju. Razumejmo to s pomočjo spodnje predstavitve:
< str razred = ' podčrtaj okras-polno besedilo-središče' > To besedilo je podčrtano < / str >< str razred = 'podčrtani okras-dvojno središče besedila' > To besedilo je dvojno podčrtano < / str >
< str razred = 'podčrtani okras-valovito besedilo-središče' > To besedilo ima valovito podčrtano < / str >
< str razred = 'podčrtano okrasje-pikčasto središče besedila' > To besedilo je podčrtano s pikami < / str >
V zgornji kodi so štiri ' str ', ki jih zagotavlja ' trdna ', ' dvojno ', ' valovit «, in » pikčasto ” podčrtano v stilu.
Izhod:
Iz naslednjega rezultata je razvidno, da so bili elementi oblikovani z uporabo različnih podčrtanih razredov dekoracije:
Kako zagotoviti vdolbine besedilu v zadnjem vetru?
V katerem koli besedilnem dokumentu se za oblikovanje besedilne vsebine uporabljajo vdolbine. Tailwind ponuja tudi privzeti razred za zagotavljanje zamika besedilni vsebini z uporabo naslednjega razreda:
alinea- { premer }Širina v zgoraj definirani sintaksi je odgovorna za velikost roba zamika, ki je na voljo besedilni vsebini.
Oblikujmo dva elementa besedila tako, da jima dodelimo različne vrednosti zamika, in poglejmo rezultat:
< str razred = ' alinea-4 py-12' > To je vzorec besedila in je na voljo z zamikom z uporabo razreda 'indent-4'. < / str >< str razred = ' alinea-28 ' > To je vzorec besedila in je na voljo z zamikom z uporabo razreda 'indent-28'. < / str >
V zgornji kodi sta dva ' str ' so opremljeni z zamikom širine ' 4 ” & “ 28 « oz. Prvi element ima tudi oblazinjenje zgoraj-spodnje z uporabo ' str-12 ” razred.
Izhod:
V spodnjem izpisu je razvidno, da ima drugi element besedila večji rob na začetku besedila zaradi večje širine zamika:
To je vse o oblikovanju besedila s pomočjo Tailwind.
Zaključek
Tailwind nudi različne razrede za oblikovanje besedilnih elementov. Za oblikovanje besedila v Tailwindu lahko uporabnik uporabi » besedilo-{barva}-{število} ', ' besedilo-{poravnava} ', ' podčrtani okras-{slog} «, in » zamik-{širina} ” razred. Ta članek je zagotovil vodnik za oblikovanje besedila z uporabo različnih razredov v Tailwindu.