Kaip naudoti įstrižaines trupmenas Tailwind Css

Šiame straipsnyje bus paaiškinta, kaip „Tailwind“ naudoti įstrižainės trupmenas.

Kaip naudoti įstrižaines trupmenas Tailwind CSS?

Tailwind įstrižainės trupmenos klasė yra iš anksto nustatytas skaitinio šrifto variantas, kuris sumažina skaitiklį ir vardiklį ir atskiria juos pasviruoju brūkšniu. Dėl to trupmenos skaičius skiriasi nuo likusio teksto.

Sintaksė

„“ naudojimo sintaksė įstrižainės trupmenos “ klasė yra tokia:

Kaip matote iš aukščiau pateiktos sintaksės, kūrėjas turi pateikti „ įstrižainės trupmenos ' viduje ' klasė “ elemento atributas.

Panaudokime „įstrižainės trupmenos“ klasę kaip praktinį pavyzdį. Toliau pateiktoje demonstracijoje vartotojas gali pamatyti skirtumą tarp įprastų ir įstrižinių trupmenų:

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

• „ div “ elementas sukuriamas ir pateikiamas kaip fono spalva naudojant “ bg-{color}-{number} ' klasė.
• Tada tekstas pateikiamas didelio šrifto dydžiu ir sulygiuotas su elemento centru, naudojant „ tekstas-lg “ ir „ teksto centras “ klasės atitinkamai.
• Toliau du '

  sukuriami elementai, o antrasis pateikiamas su įstrižainės trupmenos ' klasė.

Išvestis:

Skirtumas tarp įstrižainės trupmenos ir normaliosios trupmenos aiškiai matomas aukščiau pateiktame išvestyje.

Įstrižainės trupmenos klasės naudojimas su lūžio taškais

Pertraukos taškai naudojami kaip medijos užklausos programoje Tailwind. Yra penki numatytieji lūžio taškai su nurodytu mažiausiu pločiu. Šie lūžio taškai gali būti naudojami bet kurioje „Tailwind“ klasėje, kad būtų sukurti reaguojantys ir dinamiški dizaino maketai.

Norėdami naudoti ' įstrižainės trupmenos “ klasė su lūžio tašku Tailwind, naudojama ši sintaksė:

Toliau pateiktoje lentelėje pateikiamas mažiausias skirtingų Tailwind lūžio taškų plotis:

Naudokime pertraukos taškus su „ įstrižainės trupmenos “ klasėje, kad praktiškai suprastumėte jų naudojimą:

Aukščiau pateiktame kode „div“ elementas pateikiamas „ md:įstrižainės trupmenos “ klasė, kuri pakeis skaitinių trupmenų šriftą, kai „ md “ pertraukos taškas pasiekiamas.

Išvestis

Kaip matote išvestyje, trupmeniniai skaičiai pateikiami su įstrižainės trupmenos šriftu, kai „ md “ pertraukos taškas pasiekiamas:

Naudojant įstrižainės trupmenos klasę su galinio vėjo būsenomis

Tailwind pateikia numatytuosius nustatymus teigia “, kad suaktyvinus elementą suteiktų dizaino ypatybes. Tai daro dizaino išdėstymą patrauklesnį ir dinamiškesnį. Norint naudoti klasę „įstrižainės trupmenos“ su būsena „Tailwind“, naudojama ši sintaksė:

Numatytoji „Tailwind“ būsena yra tokia:

• Užveskite pelės žymeklį: Kai vartotojas užveda žymeklį virš elemento.
• Fokusas: Kai vartotojas sutelkia dėmesį į elementą naršydamas prie jo.
• Aktyvus: Kai vartotojas suaktyvina elementą spustelėdamas jį.
• Išjungti: Kai vartotojui neleidžiama aktyvuoti elemento.

Toliau pateiktoje demonstracijoje pateikiamas praktinis „ įstrižainės trupmenos “ klasė su “ užveskite pelės žymeklį “ būsena Tailwind:

„ div “ elementą aukščiau pateiktame kode pateikia “ svyruok: įstrižainės trupmenos “ klasė, kuri pakeis įprastą trupmenos skaičių šriftą į įstrižainės trupmenos šriftą.

Išvestis

Kaip matote išvestyje, trupmenos numerio skaitinis šriftas keičiasi, kai vartotojas užveda pelės žymeklį virš jo:

Tai viskas apie įstrižainės trupmenos klasės naudojimą „Tailwind CSS“.

Išvada

Norėdami naudoti įstrižainės trupmenas „Tailwind CSS“, naudokite „ įstrižainė-trupmena ' klasė. Ši klasė skaitiklį ir vardiklį atskirs pasviruoju brūkšniu ir padarys juos mažus. Vartotojai taip pat gali naudoti „įstrižainės trupmenos“ klasę su numatytais „Tailwind“ lūžio taškais ir būsenomis, kad dizainas būtų dinamiškesnis. Šiame straipsnyje pateikta įstrižainių trupmenų naudojimo Tailwind tvarka.