Tento článok vám poskytne návod na úpravu štýlu textu v Tailwinde pomocou nasledujúceho prehľadu:
- Použiť triedu zarovnania textu
- Poskytnite farby textovému obsahu
- Použite rôzne rodiny písiem
- Poskytnite podčiarknuté dekorácie textu
- Zadajte odsadenia textu
Ako používať triedu zarovnania textu v Tailwinde?
Pri úprave obsahu textu je umiestnenie textu rovnako dôležité ako dekorácia. Ak text nie je správne zarovnaný, celý dizajn webovej stránky bude vyzerať zvláštne. Na zarovnanie textu v Tailwinde sa používa nasledujúca trieda:
text- { zarovnanie }
Možnosti zarovnania zahŕňajú „ stred ',' vľavo ',' správny “ a „ odôvodniť “. Poďme pochopiť každé z týchto zarovnaní pomocou nižšie uvedenej ukážky:
< p trieda = 'text-center bg-slate-200' > Toto je vzorový text a je vybavený zarovnaním TEXT CENTER. < / p >
< br >
< p trieda = 'text-right bg-slate-200' > Toto je vzorový text a je vybavený zarovnaním TEXT VPRAVO. < / p >
< br >
< p trieda = 'text-left bg-slate-200' > Toto je vzorový text a je vybavený zarovnaním TEXT DOĽAVA. < / p >
< br >
< p trieda = 'text-justify bg-slate-200' > Toto je vzorový text a je vybavený zarovnaním TEXT JUSTIFY. < / p >
Vysvetlenie vyššie uvedeného kódu je nasledovné:
- Štyri“ p ” prvky sú vytvorené a oddelené zlomom riadku.
- Text štyroch prvkov p sa zarovná na konkrétnu pozíciu pomocou „ text-{alignment} ' trieda.
- ' bg-{color}-{number} trieda poskytuje farbu pozadia pre každý p ' element.
Výkon
Na výstupe nižšie je možné vidieť, ako každá z tried zarovnania ovplyvňuje polohu textu. Môžete vidieť, že text prvého prvku je zarovnaný na stred, druhý vpravo, tretí vľavo a štvrtý prvok zobrazuje zarovnaný text:
Ako poskytnúť farbu textovému obsahu v Tailwinde?
Farba hrá dôležitú úlohu pri štylizácii textového obsahu prvku. Ak nie je vybratá vhodná farba, text môže byť ťažko čitateľný. To negatívne ovplyvní návrh rozloženia. Ak chcete nastaviť farbu textu v Tailwinde, použite nižšie uvedenú triedu:
text- { farba } - { číslo }Vo vyššie definovanej syntaxi musí používateľ zadať názov farby, za ktorým nasleduje číslo, ktoré bude zodpovedné za odtieň špecifikovanej farby.
Nižšie uvedená ukážka má tri „ p ” prvky, ktoré sú štylizované pomocou rôznych tried farieb textu:
< p trieda = 'text-violet-500 text-center' > Toto je text vo fialovej farbe < / p >< p trieda = 'text-red-500 text-center' > Toto je červený text < / p >
< p trieda = 'text-green-500 text-center' > Toto je zelený text < / p >
Triedy použité vo vyššie uvedenom kóde sú nasledovné:
- Prvý ' p “ prvok je vybavený fialovou farbou pomocou „ text-{farba}-{číslo} ' trieda.
- Druhý a tretí' p ” prvky sú opatrené červenou a zelenou farbou pomocou rovnakej metódy.
- ' textové centrum ” umiestni textový obsah do stredu prvku.
Výkon
Z nižšie uvedeného výstupu je zrejmé, že predvolená čierna farba textu sa zmení na špecifikované farby pomocou triedy text-{color}-{number}:
Ako používať rôzne rodiny písiem v Tailwinde?
Písmo textového prvku možno použiť na zdôraznenie konkrétneho textu. Každé písmo má svoje vlastné charakteristiky. Ak chcete zmeniť písmo prvku v Tailwinde, použite nasledujúcu triedu:
font- { rodina }Tailwind poskytuje tri predvolené rodiny písiem, napr. bez ',' serif “ a „ mono “. Každá z týchto rodín písiem má iný štýl písma.
Podobne aj „ font-{weight} Trieda ” sa dá použiť na to, aby bol text tučný, svetlý alebo normálny. Použime ukážku na poskytnutie hrúbky písma rôznym rodinám písiem v Tailwinde:
< p trieda = 'font-mono font-extrabold text-center' > Toto je extra tučný text vo formáte MONO < / p >< p trieda = 'font-serif font-semibold text-center' > Toto je polotučný text s písmom SERIF < / p >
< p trieda = 'font-sans font-extralight text-center' > Toto je extra svetlý text s písmom SANS < / p >
Vysvetlenie kódu:
- Tri ' p ” prvky poskytujú rodiny písiem „mono“, „serf“ a „sans“ pomocou „ font-{family} ' trieda.
- Podobne aj tri „ p “prvky sú poskytované ako “ extra tučný ',' polotučný “ a „ extralight 'hmotnosti písma pomocou ' font-{weight} ' trieda.
- Všetky tieto prvky využívajú „ textové centrum ” trieda, ktorá umiestni text do stredu prvku.
Výkon
Daný výstup ukazuje, že každý „ p ” prvok má inú rodinu písiem a inú váhu písma:
Ako poskytnúť podčiarknuté dekorácie textu v Tailwind?
Textové prvky môžu byť tiež štylizované pridaním rôznych typov podčiarknutia. Toto možno použiť na zdôraznenie časti textu. Na podčiarknutie textového prvku sa používa nasledujúca trieda:
zdôrazniť dekorácia- { štýl }Slovo ' zdôrazniť “ poskytuje základné podčiarknutie prvku a „ dekorácia-{style} ” sa používa na poskytnutie rôznych štýlov podčiarknutia. Pochopme to pomocou nižšie uvedenej demonštrácie:
< p trieda = 'podčiarknutie dekorácie-plný text-stred' > Tento text má plné podčiarknutie < / p >< p trieda = 'podčiarknutie dekorácie-dvojitý text-stred' > Tento text má dvojité podčiarknutie < / p >
< p trieda = 'podčiarknutie dekorácie-vlnitý text-stred' > Tento text má vlnité podčiarknutie < / p >
< p trieda = 'podčiarknuť dekoráciu-bodkovaný text-stred' > Tento text má bodkované podčiarknutie < / p >
Vo vyššie uvedenom kóde sú štyri „ p prvky, ktoré poskytuje „ pevný ',' dvojitý ',' zvlnená “ a „ bodkovaný “ podčiarkne štýl.
Výkon:
Z nasledujúceho výstupu je zrejmé, že prvky boli štylizované pomocou rôznych podčiarknutých tried dekorácie:
Ako poskytnúť odsadenia textu v Tailwinde?
V akomkoľvek textovom dokumente sa na formátovanie textového obsahu používajú odsadenia. Tailwind tiež poskytuje predvolenú triedu na odsadenie textového obsahu pomocou nasledujúcej triedy:
odsadenie- { šírka }Šírka vo vyššie definovanej syntaxi je zodpovedná za veľkosť okraja odsadenia poskytnutého obsahu textu.
Štýlujme dva textové prvky tak, že im priradíme rôzne hodnoty odsadenia a uvidíme výsledok:
< p trieda = 'odrážka-4 py-12' > Toto je vzorový text a je vybavený odsadením pomocou triedy 'indent-4'. < / p >< p trieda = 'zarážka-28' > Toto je vzorový text a obsahuje odsadenie pomocou triedy 'indent-28'. < / p >
Vo vyššie uvedenom kóde sú dve „ p “ sú vybavené odsadením šírky “ 4 “ & “ 28 “. Prvý prvok je tiež vybavený hornou a spodnou výplňou pomocou „ p-12 ' trieda.
Výkon:
Na výstupe nižšie je vidieť, že druhý textový prvok má väčší okraj na začiatku textu kvôli väčšej šírke odsadenia:
To je všetko o úprave štýlu textu pomocou služby Tailwind.
Záver
Tailwind poskytuje rôzne triedy pre úpravu prvkov textu. Na úpravu textu v Tailwinde môže používateľ použiť „ text-{farba}-{číslo} ',' text-{alignment} ',' podčiarknutie dekorácie-{style} “ a „ odsadenie-{šírka} ' trieda. Tento článok poskytuje návod na úpravu štýlu textu pomocou rôznych tried v Tailwinde.