Teksto stiliaus kūrimo naudojant Tailwind CSS vadovas

Šiame straipsnyje bus pateiktas teksto stiliaus „Tailwind“ kūrimo vadovas, naudojant šį kontūrą:

• Naudokite teksto lygiavimo klasę
• Suteikite spalvų teksto turiniui
• Naudokite skirtingas šriftų šeimas
• Pateikite teksto pabraukimo dekoracijas
• Pateikite teksto įtraukas

Kaip naudoti teksto lygiavimo klasę „Tailwind“?

Formuojant teksto turinį, teksto padėtis yra tokia pat svarbi, kaip ir puošyba. Jei tekstas netinkamai išlygiuotas, visas tinklalapio dizainas atrodys keistai. Norėdami sulygiuoti tekstą Tailwind, naudojama ši klasė:

Lygiavimo parinktys apima „ centras ', ' paliko ', ' teisingai “ ir „ pateisinti “. Supraskime kiekvieną iš šių lygiavimų naudodami toliau pateiktą demonstraciją:

Aukščiau pateikto kodo paaiškinimas yra toks:

• Keturi “ p “ elementai sukuriami ir atskiriami eilutės pertrauka.
• Keturių p elementų tekstas sulygiuotas į konkrečią vietą naudojant „ tekstas-{lygiavimas} ' klasė.
• „ bg-{color}-{number} “ klasė suteikia fono spalvą kiekvienam “ p “ elementas.

Išvestis

Toliau pateiktame išvestyje galima pamatyti, kaip kiekviena lygiavimo klasė veikia teksto padėtį. Matote, kad pirmojo elemento tekstas išlygiuotas centre, antrojo – dešinėje, trečio – kairėje, o ketvirtame elemente rodomas išlygintas tekstas:

Kaip suteikti spalvų teksto turiniui „Tailwind“?

Spalva vaidina svarbų vaidmenį formuojant elemento teksto turinį. Jei nepasirinksite tinkamos spalvos, tekstas gali tapti sunkiai įskaitomas. Tai neigiamai paveiks maketo dizainą. Norėdami nustatyti teksto spalvą Tailwind, naudokite toliau pateiktą klasę:

Aukščiau apibrėžtoje sintaksėje vartotojas turi nurodyti spalvos pavadinimą, po kurio – skaičių, kuris bus atsakingas už nurodytos spalvos atspalvį.

Toliau pateiktoje demonstracijoje yra trys „ p “ elementai, kurių stilius sudaromos naudojant skirtingas teksto spalvų klases:

Aukščiau pateiktame kode naudojamos klasės yra šios:

• Pirmas ' p “ elementas pateikiamas violetine spalva naudojant “ tekstas-{spalva}-{numeris} ' klasė.
• Antrasis ir trečiasis“ p “ elementai pateikiami raudona ir žalia spalvomis, naudojant tą patį metodą.
• „ teksto centras “ klasė išdėsto teksto turinį į elemento centrą.

Išvestis

Iš toliau pateiktos išvesties aišku, kad numatytoji juoda teksto spalva pakeičiama į nurodytas spalvas naudojant klasę text-{color}-{number}:

Kaip „Tailwind“ naudoti skirtingas šriftų šeimas?

Teksto elemento šriftas gali būti naudojamas konkrečiam tekstui pabrėžti. Kiekvienas šriftas turi savo ypatybes. Norėdami pakeisti elemento šriftą Tailwind, naudokite šią klasę:

Tailwind pateikia tris numatytąsias šriftų šeimas, t. y. be ', ' serifas “ ir „ monofoninis “. Kiekviena iš šių šriftų šeimų turi skirtingą šriftų stilių.

Panašiai „ šriftas-{weight} “ klasė gali būti naudojama, kad tekstas būtų paryškintas, šviesus arba įprastas. Naudokime demonstraciją, kad pateiktume šrifto svorį skirtingoms „Tailwind“ šriftų šeimoms:

Kodo paaiškinimas:

• Trys ' p “ elementus pateikia „mono“, „serf“ ir „sans“ šriftų šeimos, naudojant „ šrifto šeima} ' klasė.
• Panašiai trys „ p “ elementai pateikiami kaip „ ekstrabolidas ', ' pusiau paryškintas ', ir ' extralight ' šrifto svorį naudojant ' šriftas-{weight} ' klasė.
• Visi šie elementai naudoja „ teksto centras “ klasė, kuri patalpina tekstą elemento centre.

Išvestis

Pateikta išvestis rodo, kad kiekvienas „ p “ elementas turi skirtingą šriftų šeimą ir šrifto svorį:

Kaip „Tailwind“ tekstą papuošti pabraukimu?

Teksto elementus taip pat galima stilizuoti pridedant skirtingų tipų pabraukimų. Tai gali būti naudojama norint pabrėžti teksto dalį. Norint pabraukti teksto elementą, naudojama ši klasė:

Žodis ' pabraukti “ pateikia pagrindinį elemento pabraukimą ir „ apdaila-{style} “ klasė naudojama norint pateikti skirtingus pabraukimo stilius. Supraskime tai naudodami toliau pateiktą demonstraciją:

Aukščiau pateiktame kode yra keturi ' p “ elementai, kuriuos pateikia “ kietas ', ' dvigubai ', ' banguotas “ ir „ taškuotas “ stiliaus pabraukimai.

Išvestis:

Iš toliau pateiktos išvados aišku, kad elementai buvo sukurti naudojant skirtingas pabrauktas dekoravimo klases:

Kaip „Tailwind“ padaryti teksto įtraukas?

Bet kuriame tekstiniame dokumente teksto turiniui formatuoti naudojamos įtraukos. Tailwind taip pat suteikia numatytąją klasę, kad teksto turinys būtų įtrauktas naudojant šią klasę:

Aukščiau nustatytos sintaksės plotis yra atsakingas už teksto turinio įtraukos paraštės dydį.

Sukurkime dviejų teksto elementų stilių, priskirdami jiems skirtingas įtraukos reikšmes ir pamatysime rezultatą:

Aukščiau pateiktame kode du „ p “ yra pateikti su pločio įtrauka “ 4 “ ir “ 28 “ atitinkamai. Pirmasis elementas taip pat pateikiamas su užpildu viršuje ir apačioje naudojant „ p-12 ' klasė.

Išvestis:

Toliau pateiktoje išvestyje matyti, kad antrasis teksto elementas turi didesnę paraštę teksto pradžioje dėl didesnio įtraukos pločio:

Tai viskas apie teksto stilių sukūrimą naudojant Tailwind.

Išvada

Tailwind siūlo įvairias teksto elementų stiliaus klases. Norėdami stilizuoti tekstą „Tailwind“, vartotojas gali naudoti „ tekstas-{spalva}-{numeris} ', ' tekstas-{lygiavimas} ', ' pabraukite dekoraciją-{style} “ ir „ įtrauka-{width} ' klasė. Šiame straipsnyje pateiktas vadovas, kaip sukurti teksto stilių naudojant įvairias „Tailwind“ klases.