Tässä artikkelissa käsitellään kuitenkin kahta erityistä luokkaa, jotka ovat suhteellisia lukuja ja taulukkokuvioita. Niitä käytetään Tailwindin numeeristen arvojen tyylistämiseen sekä numeeristen tietojen järjestämiseen ja esittämiseen asiakirjan suunnittelun kannalta miellyttävällä tavalla.
Tässä artikkelissa käsitellään Tailwind CSS:n suhteellisia ja taulukkolukuja käyttämällä seuraavaa hahmotelmaa:
- Kuinka käyttää suhteellisia lukuja Tailwind CSS:ssä?
- Kuinka käyttää taulukkokuvia Tailwind CSS:ssä?
- Ero suhteellisten ja taulukkomuotoisten kuvien välillä
Kuinka käyttää suhteellisia lukuja Tailwind CSS:ssä?
Suhteelliset luvut -luokka määrittää elementille sopimuksen, jossa jokainen luku ei ole sama leveä.
Syntaksi
Tailwindin suhteellisten lukujen syntaksi on seuraava:
< div luokkaa = 'suhteelliset luvut' >
< div / >
Yllä annetussa syntaksissa ' suhteelliset numerot ” luokka on annettava elementille suhteellisten lukujen käyttämiseksi.
Katsotaanpa käytännön esimerkkiä suhteellisista luvuista.
Alla annetussa koodissa kaksi ' s ' elementit sisältyvät ' div ”-elementti, joka käyttää suhteelliset luvut -luokkaa:
< div luokkaa = ' suhteelliset-luvut text-center bg-slate-200 text-xl' >< s > 121212 < / s >
< s > 838383 < / s >
< / div >
Yllä olevan koodin selitys on seuraava:
- ' div '-elementti käyttää ' suhteelliset numerot ” luokka, joka käyttää suhteellista lukuominaisuutta lukuihin.
- ' tekstikeskus ” luokka sijoittaa tekstin elementin keskelle.
- ' bg-{väri}-{numero} ” luokka vastaa elementin taustaväristä.
- ' teksti-xl ” -luokka tarjoaa erittäin suuren kirjasinkoon tekstille.
- Seuraavaksi kaksi' s ” luodaan eri numeroita sisältäviä elementtejä.
Lähtö
Tulosteesta voidaan nähdä, että numerot toisessa ' s ” elementti on hieman leveämpi kuin ensimmäinen. Tämä johtuu suhteellisten lukujen luokasta:
Kuinka käyttää taulukkokuvia Tailwind CSS:ssä?
Tailwindin taulukkoluvut osoittavat sopimuksen elementille, jossa jokaisella numerolla on sama leveyskoko. Tämä luo numeroista symmetrisen taulukkomaisen esityksen.
Syntaksi
Taulukkokuvien käytön syntaksi on seuraava:
< div luokkaa = 'taulukkonumerot' >< div / >
Yllä annetussa syntaksissa ' taulukkonumerot ” -luokka tarjotaan elementille taulukkokuvien käyttöä varten.
Katsotaan kuinka ' taulukkonumerot ” vaikuttavat HTML-dokumentin numeerisiin arvoihin. Tätä mielenosoitusta varten kaksi ' s ” numeerisilla arvoilla luodaan ja sisältyvät ” div ” elementti, joka käyttää taulukkolukuluokkaa:
< div luokkaa = 'taulukko-numerot text-center bg-slate-200 text-xl' >< s > 121212 < / s >
< s > 838383 < / s >
< / div >
Yllä olevassa koodissa ' taulukkonumerot ' luokka tarjotaan ' div 'elementti, joka määrittää lapselle taulukkokuvien tyylin' s ”elementtejä.
Lähtö:
Yllä olevasta lähdöstä voidaan nähdä, että numeeriset arvot molemmissa elementeissä on kohdistettu täydellisesti, koska numeroiden leveys on sama.
Bonustiedot: Ero suhteellisten ja taulukkomuotoisten lukujen välillä Tailwind CSS:ssä
Katsotaanpa esitystä, joka erottaa taulukko- ja suhteelliset lukuluokkien vaikutuksen numeerisiin arvoihin. Tässä esittelyssä elementeille määritetään oletusarvoisesti suhteelliset luvut. Seuraavaksi elementeille määritetään hiiritilaa käyttämällä taulukkolukuluokka:
< div luokkaa = ' verrannolliset-luvut text-center bg-slate-200 text-xl hover:tabular-nums' >< s > 121212 < / s >
< s > 838383 < / s >
< / div >
Yllä olevasta koodista voidaan nähdä, että ' div '-elementti on varustettu ' suhteelliset numerot ”, joka on oletuskäytäntö, jota numeeriset arvot noudattavat.
Samoin johtuen ' hover:tabular-nums ” -luokassa, numeeriset arvot noudattavat taulukkolukujen käytäntöä aina, kun käyttäjä siirtää hiiren osoittimen 'div'-elementin päälle.
Lähtö
Annetussa tulosteessa numeeristen arvojen leveys muuttuu, kun käyttäjä vie hiiren elementin päälle. Tämä tarjoaa visuaalisen eron Tailwindin suhteellisten ja taulukkolukujen välillä:
Tämä koskee Tailwindin suhteellisia ja taulukkolukuja.
Johtopäätös
Jos haluat käyttää suhteellisia lukuja Tailwindissä, ' suhteelliset numerot ” luokkaa käytetään. Suhteelliset luvut käyttävät käytäntöä, jossa jokaisella numeerisella arvolla on eri leveyskoko. Jos haluat käyttää Tailwindin taulukkokuvia, ' taulukkonumerot ” luokkaa käytetään. Taulukkokuvissa käytetään käytäntöä, jossa jokaisella numeerisella arvolla on sama leveyskoko. Tässä artikkelissa on esitetty menetelmä suhteellisten ja taulukkolukujen käyttämiseksi Tailwindissä.