Šajā rakstā tiks sniegti norādījumi par teksta veidošanu programmā Tailwind, izmantojot šādu kontūru:
- Izmantojiet teksta līdzināšanas klasi
- Nodrošiniet teksta saturam krāsas
- Izmantojiet dažādas fontu saimes
- Nodrošiniet tekstam pasvītrojumus
- Nodrošiniet tekstam atkāpes
Kā lietot teksta līdzināšanas klasi programmā Tailwind?
Veidojot teksta saturu, teksta novietojums ir tikpat svarīgs kā dekorācija. Ja teksts nav pareizi līdzināts, viss tīmekļa lapas dizains izskatīsies dīvaini. Lai līdzinātu tekstu programmā Tailwind, tiek izmantota šāda klase:
teksts- { izlīdzināšana }
Izlīdzināšanas opcijas ietver ' centrs ',' pa kreisi ',' pa labi ', un ' attaisnot ”. Izpratīsim katru no šiem līdzinājumiem, izmantojot tālāk redzamo demonstrāciju:
< lpp klasē = 'text-center bg-slate-200' > Šis ir teksta paraugs, un tas ir nodrošināts ar TEKSTA CENTRA līdzinājumu. < / lpp >
< br >
< lpp klasē = 'text-right bg-slate-200' > Šis ir teksta paraugs, un tas ir nodrošināts ar TEKSTA LABĀS līdzinājumu. < / lpp >
< br >
< lpp klasē = 'text-left bg-slate-200' > Šis ir teksta paraugs, un tas ir nodrošināts ar TEKSTA KREISĀ līdzinājumu. < / lpp >
< br >
< lpp klasē = 'text-justify bg-slate-200' > Šis ir teksta paraugs, un tas ir nodrošināts ar līdzinājumu TEXT JUSTIFY. < / lpp >
Iepriekš minētā koda skaidrojums ir šāds:
- Četri' lpp ” elementi tiek izveidoti un atdalīti ar rindiņas pārtraukumu.
- Četru p elementu teksts tiek līdzināts noteiktā pozīcijā, izmantojot “ teksts-{līdzinājums} ” klase.
- ' bg-{color}-{number} klase nodrošina fona krāsu katram lpp ” elements.
Izvade
Zemāk esošajā izvadā var redzēt, kā katra no līdzināšanas klasēm ietekmē teksta pozīciju. Jūs varat redzēt, ka pirmā elementa teksts ir līdzināts kā centrā, otrais kā pa labi, trešais kā pa kreisi un ceturtais elements parāda taisnotu tekstu:
Kā Tailwind teksta saturam nodrošināt krāsu?
Krāsai ir svarīga loma elementa teksta satura veidošanā. Ja nav izvēlēta atbilstoša krāsa, teksts var kļūt grūti salasāms. Tas negatīvi ietekmēs izkārtojuma dizainu. Lai iestatītu teksta krāsu programmā Tailwind, izmantojiet tālāk norādīto klasi:
teksts- { krāsa } - { numuru }Iepriekš definētajā sintaksē lietotājam ir jānorāda krāsas nosaukums, kam seko cipars, kas būs atbildīgs par norādītās krāsas toni.
Tālāk sniegtajā demonstrācijā ir trīs ' lpp ” elementi, kas veidoti, izmantojot dažādas teksta krāsu klases:
< lpp klasē = 'text-violet-500 text-center' > Šis ir violetas krāsas teksts < / lpp >< lpp klasē = 'text-red-500 text-center' > Šis ir sarkanas krāsas teksts < / lpp >
< lpp klasē = 'text-green-500 text-center' > Šis ir zaļas krāsas teksts < / lpp >
Iepriekš minētajā kodā izmantotās klases ir šādas:
- Pirmais ' lpp ' elements tiek nodrošināts ar violetu krāsu, izmantojot ' teksts-{krāsa}-{skaitlis} ” klase.
- Otrais un trešais' lpp ” elementi tiek nodrošināti ar sarkanu un zaļu krāsu, izmantojot to pašu metodi.
- ' teksta centrs ” klase novieto teksta saturu elementa centrā.
Izvade
No tālāk redzamās izvades ir skaidrs, ka teksta noklusējuma melnā krāsa tiek mainīta uz norādītajām krāsām, izmantojot klasi text-{color}-{number}:
Kā Tailwind izmantot dažādas fontu saimes?
Teksta elementa fontu var izmantot, lai uzsvērtu konkrētu tekstu. Katram fontam ir savas īpašības. Lai mainītu elementa fontu programmā Tailwind, izmantojiet šādu klasi:
fonts- { ģimene }Tailwind nodrošina trīs noklusējuma fontu saimes, t.i. bez ',' serifs ', un ' mono ”. Katrai no šīm fontu saimēm ir atšķirīgs fontu stils.
Līdzīgi ' fonts-{weight} ” var izmantot, lai tekstu padarītu treknrakstu, gaišu vai normālu. Izmantosim demonstrāciju, lai nodrošinātu fontu svaru dažādām fontu saimēm programmā Tailwind:
< lpp klasē = 'font-mono font-extrabold text-center' > Šis ir īpaši trekns teksts fontā MONO < / lpp >< lpp klasē = ' font-serif font-semibold text-center' > Šis ir daļēji trekns teksts fontā SERIF < / lpp >
< lpp klasē = ' font-sans font-extralight text-center' > Šis ir īpaši viegls teksts fontā SANS < / lpp >
Koda skaidrojums:
- Trīs' lpp ” elementus nodrošina “mono”, “serf” un “sans” fontu saimes, izmantojot “ fonts-{family} ” klase.
- Tāpat trīs ' lpp ' elementi tiek nodrošināti kā ' īpaši treknrakstā ',' daļēji treknrakstā ”, un “ extralight ' fontu svaru, izmantojot ' fonts-{weight} ” klase.
- Visi šie elementi izmanto ' teksta centrs ” klase, kas ievieto tekstu elementa centrā.
Izvade
Dotā izvade parāda, ka katrs “ lpp ” elementam ir cita fontu saime un fontu svars:
Kā nodrošināt pasvītrojumus tekstam aizmugurējā vējā?
Teksta elementus var arī stilizēt, pievienojot dažāda veida pasvītrojumus. To var izmantot, lai uzsvērtu kādu teksta daļu. Lai pasvītrotu teksta elementu, tiek izmantota šāda klase:
pasvītrot dekorēšana - { stils }Vārds ' pasvītrot ' nodrošina elementa pamata pasvītrojumu un ' dekorēšana-{style} ” klase tiek izmantota, lai nodrošinātu dažādus pasvītrojuma stilus. Sapratīsim to, izmantojot tālāk sniegto demonstrāciju:
< lpp klasē = 'pasvītrot dekorāciju - viengabala teksta centru' > Šim tekstam ir stingrs pasvītrojums < / lpp >< lpp klasē = 'pasvītrot dekorāciju - dubultā teksta centru' > Šim tekstam ir dubults pasvītrojums < / lpp >
< lpp klasē = 'pasvītrot dekorāciju-viļņotu tekstu-centrs' > Šim tekstam ir viļņveida pasvītrojums < / lpp >
< lpp klasē = 'pasvītrot ar punktētu tekstu centrā' > Šim tekstam ir punktēta pasvītra < / lpp >
Iepriekš minētajā kodā ir četri ' lpp elementi, ko nodrošina ciets ',' dubultā ',' viļņains ', un ' punktēts ” stila pasvītrojumi.
Izvade:
No sekojošā rezultāta ir skaidrs, ka elementi ir veidoti, izmantojot dažādas pasvītrotās apdares klases:
Kā Tailwind tekstam nodrošināt atkāpes?
Jebkurā teksta dokumentā teksta satura formatēšanai tiek izmantotas atkāpes. Tailwind nodrošina arī noklusējuma klasi, lai teksta saturam nodrošinātu atkāpi, izmantojot šādu klasi:
ievilkums- { platums }Platums iepriekš definētajā sintaksē ir atbildīgs par teksta saturam paredzētās atkāpes piemales lielumu.
Veidosim divus teksta elementus, piešķirot tiem dažādas atkāpes vērtības, un redzēsim rezultātu:
< lpp klasē = ' indent-4 py-12' > Šis ir teksta paraugs, un tas tiek nodrošināts kopā ar atkāpi, izmantojot klasi 'atkāpe-4'. < / lpp >< lpp klasē = '28. ievilkums' > Šis ir teksta paraugs, un tas tiek nodrošināts kopā ar atkāpi, izmantojot klasi 'indent-28'. < / lpp >
Iepriekš minētajā kodā divi ' lpp ” ir nodrošināti ar platuma atkāpi 4 '&' 28 ” attiecīgi. Pirmais elements ir nodrošināts arī ar polsterējumu no augšas un apakšas, izmantojot ' p-12 ” klase.
Izvade:
Zemāk esošajā izvadā var redzēt, ka otrajam teksta elementam ir lielāka piemale teksta sākumā, jo ir lielāks atkāpes platums:
Tas viss attiecas uz teksta veidošanu, izmantojot Tailwind.
Secinājums
Tailwind nodrošina dažādas klases teksta elementu veidošanai. Lai veidotu teksta stilu Tailwind, lietotājs var izmantot “ teksts-{krāsa}-{skaitlis} ',' teksts-{līdzinājums} ',' pasvītrot dekorāciju-{style} ', un ' atkāpe-{width} ” klase. Šajā rakstā ir sniegts ceļvedis teksta veidošanai, izmantojot dažādas Tailwind klases.