Útmutató a szöveg stílusának kialakításához Tailwind CSS használatával

Ez a cikk útmutatást ad a szöveg Tailwind programban történő stílusához a következő vázlat segítségével:

• Szöveg igazítási osztály használata
• Adjon színeket a szöveges tartalomhoz
• Használjon különböző betűtípuscsaládokat
• Adjon aláhúzás díszítést a szöveghez
• Adjon behúzásokat a szöveghez

Hogyan használjuk a szöveg igazítási osztályt a Tailwindben?

A szövegtartalom stílusának kialakítása során a szöveg elhelyezése ugyanolyan fontos, mint a díszítés. Ha a szöveg nincs megfelelően igazítva, a weboldal egésze furcsán fog kinézni. A szöveg igazításához a Tailwindben a következő osztályt kell használni:

Az igazítási lehetőségek közé tartozik a „ központ ', ' bal ', ' jobb ”, és „ igazolni ”. Értsük meg ezeket az igazításokat az alábbi bemutató segítségével:

A fenti kód magyarázata a következő:

• négy' p ” elemek jönnek létre és sortöréssel választják el őket.
• A négy p elem szövege egy adott pozícióhoz igazodik a „ szöveg-{igazítás} ' osztály.
• A ' bg-{color}-{number} ' osztály biztosítja a háttérszínt minden ' p ” elemet.

Kimenet

Az alábbi kimeneten látható, hogy az egyes igazítási osztályok hogyan befolyásolják a szöveg pozícióját. Látható, hogy az első elem szövege középre igazodik, a második jobbra, a harmadik balra, a negyedik elem pedig sorkizárt szöveget mutat:

Hogyan biztosítsunk színt a szöveges tartalomhoz a hátszélben?

A szín fontos szerepet játszik egy elem szövegtartalmának stílusában. Ha nem választja ki a megfelelő színt, a szöveg nehezen olvashatóvá válhat. Ez negatívan befolyásolja az elrendezés kialakítását. A szöveg színének beállításához a Tailwind programban használja az alábbi osztályt:

A fent meghatározott szintaxisban a felhasználónak meg kell adnia a szín nevét, majd egy számot, amely felelős a megadott szín árnyalatáért.

Az alább bemutatott bemutató három „ p ” elemek, amelyek különböző szövegszínosztályokkal vannak stílusozva:

A fenti kódban használt osztályok a következők:

• Az első ' p ' elem lila színnel van ellátva a ' szöveg-{szín}-{szám} ' osztály.
• A második és a harmadik' p ” elemeket ugyanazzal a módszerrel látjuk el a piros és a zöld színnel.
• A ' szövegközpont ” osztály a szöveges tartalmat az elem közepére helyezi.

Kimenet

Az alábbi kimenetből jól látható, hogy a szöveg alapértelmezett fekete színe a szöveg-{szín}-{szám} osztály segítségével a megadott színekre módosul:

Hogyan használjunk különböző betűtípusokat a Tailwindben?

Egy szövegelem betűtípusa egy adott szöveg hangsúlyozására használható. Minden betűtípusnak megvannak a maga sajátosságai. Egy elem betűtípusának megváltoztatásához a Tailwindben használja a következő osztályt:

A Tailwind három alapértelmezett betűtípuscsaládot biztosít, azaz nélkül ', ' serif ”, és „ monó ”. Ezen betűtípuscsaládok mindegyikének más betűstílusa van.

Hasonlóképpen a „ betűtípus-{súly} ” osztály segítségével lehet félkövérre, világosra vagy normálra tenni a szöveget. Használjunk egy bemutatót, hogy megadjunk betűsúlyt a Tailwind különböző betűtípuscsaládjaihoz:

Magyarázat a kódhoz:

• A három ' p ” elemeket a „mono”, „serf” és „sans” betűtípuscsaládok biztosítják a „ betűtípus család} ' osztály.
• Hasonlóképpen a három „ p ' elemek a következőképpen vannak megadva: ' extramerész ', ' félmerész ', és a ' extralight ' betűsúlyok a ' betűtípus-{súly} ' osztály.
• Mindezek az elemek a „ szövegközpont ” osztály, amely a szöveget az elem közepére helyezi.

Kimenet

A megadott kimenet azt mutatja, hogy minden „ p ” elemnek más a betűtípuscsaládja és a betűsúlya:

Hogyan lehet aláhúzással díszíteni a szöveget hátszélben?

A szövegelemek különböző típusú aláhúzások hozzáadásával stílusozhatók. Ez a szöveg egy részének hangsúlyozására használható. A szövegelem aláhúzásokhoz a következő osztályt kell használni:

A szó ' aláhúzás ' alapvető aláhúzást ad az elemhez, és a ' dekoráció-{stílus} ” osztály az aláhúzás különböző stílusainak biztosítására szolgál. Értsük meg ezt az alábbi bemutató segítségével:

A fenti kódban négy „ p ' elemek, amelyeket a ' szilárd ', ' kettős ', ' hullámos ”, és „ pontozott ” stílusú aláhúzások.

Kimenet:

A következő kimenetből jól látható, hogy az elemek stílusa a különböző aláhúzott dekorációs osztályok használatával történt:

Hogyan készítsünk behúzásokat a szöveghez Tailwindben?

Minden szöveges dokumentumban a behúzásokat a szövegtartalom formázására használják. A Tailwind egy alapértelmezett osztályt is biztosít a szövegtartalom behúzásának biztosításához a következő osztály használatával:

A fent meghatározott szintaxisban a szélesség a felelős a szövegtartalomhoz biztosított behúzás margójának méretéért.

Stíluszunk két szövegelemet úgy, hogy különböző behúzási értékeket rendelünk hozzájuk, és nézzük meg az eredményt:

A fenti kódban két „ p ' a szélesség behúzásával vannak ellátva' 4 ' és ' 28 ” ill. Az első elemet a felső-alsó párnázással is ellátjuk a „ p-12 ' osztály.

Kimenet:

Az alábbi kimeneten látható, hogy a második szövegelemnek nagyobb margója van a szöveg elején a nagyobb behúzási szélesség miatt:

Ez a szöveg stílusának kialakításáról szól a Tailwind használatával.

Következtetés

A Tailwind különféle osztályokat biztosít a szövegelemek stílusához. A szöveg stílusozásához Tailwindben a felhasználó használhatja a „ szöveg-{szín}-{szám} ', ' szöveg-{igazítás} ', ' aláhúzás díszítés-{style} ”, és „ indent-{width} ' osztály. Ez a cikk útmutatót ad a szöveg stílusának kialakításához a Tailwind különböző osztályaival.