Imidlertid vil denne artikkelen utdype to spesifikke klasser som er proporsjonale tall og tabellfigurer. Disse brukes til å style de numeriske verdiene i Tailwind og arrangere og representere de numeriske dataene på en måte som appellerer til utformingen av dokumentet.
Denne artikkelen vil utdype de proporsjonale og tabellformede tallene i Tailwind CSS ved å bruke følgende disposisjon:
- Hvordan bruke proporsjonale tall i Tailwind CSS?
- Hvordan bruke tabellfigurer i Tailwind CSS?
- Forskjellen mellom proporsjonale og tabellformede tall
Hvordan bruke proporsjonale tall i Tailwind CSS?
Klassen proporsjonale tall vil tildele elementet en konvensjon der hvert tall ikke har samme bredde.
Syntaks
Syntaksen for bruk av proporsjonale tall i Tailwind er som følger:
< div klasse = 'proporsjonale tall' >
< div / >
I den ovenfor angitte syntaksen, ' proporsjonale tall ” klasse må gis til elementet for å bruke proporsjonale tall.
La oss se et praktisk eksempel på proporsjonale tall.
I koden nedenfor, to ' s 'elementer er inneholdt i en ' div ' element som bruker proporsjonale tallklassen:
< div klasse = 'proporsjonal-numre tekst-senter bg-slate-200 tekst-xl' >< s > 121212 < / s >
< s > 838383 < / s >
< / div >
Forklaringen av koden ovenfor er som følger:
- « div '-elementet bruker ' proporsjonale tall ” klasse som vil bruke egenskapen proporsjonal tall på tallene.
- « tekst-senter ” klasse plasserer teksten i midten av elementet.
- « bg-{color}-{number} ” klasse er ansvarlig for bakgrunnsfargen til elementet.
- « tekst-xl ” klasse gir en ekstra stor skriftstørrelse for teksten.
- Deretter to ' s '-elementer opprettes som inneholder forskjellige tall.
Produksjon
Det kan sees i utgangen at tallene i den andre ' s ” element har en litt større bredde enn det første. Dette er på grunn av proporsjonale tallklassen:
Hvordan bruke tabellfigurer i Tailwind CSS?
Tabellfigurene i Tailwind tildeler konvensjonen til et element der hvert tall har samme breddestørrelse. Dette skaper en symmetrisk tabelllignende representasjon av tallene.
Syntaks
Syntaksen for bruk av tabellfigurene er som følger:
< div klasse = 'tabell-numre' >< div / >
I den ovenfor angitte syntaksen, ' tabell-numre ” klasse er gitt til elementet for å bruke tabellfigurene.
La oss se hvordan ' tabell-numre ” påvirke de numeriske verdiene i et HTML-dokument. For denne demonstrasjonen, to ' s ' med numeriske verdier er opprettet og inneholdt i en ' div ' element som bruker klassen tabellfigurer:
< div klasse = 'Tabular-nums text-center bg-slate-200 text-xl' >< s > 121212 < / s >
< s > 838383 < / s >
< / div >
I koden ovenfor, ' tabell-numre '-klassen er gitt til ' div ' element som vil tilordne stilen til tabellfigurene til barnet ' s 'elementer.
Produksjon:
Det kan sees i utgangen ovenfor at de numeriske verdiene i begge elementene er perfekt justert på grunn av de samme breddestørrelsene på sifrene.
Bonusinfo: Forskjellen mellom proporsjonale og tabellformede figurer i Tailwind CSS
La oss se på en demonstrasjon som skiller effekten av tabell- og proporsjonale tallklasser på de numeriske verdiene. I denne demonstrasjonen vil elementene bli tildelt proporsjonale tallklassen som standard. Deretter, ved å bruke hover-tilstanden, vil elementene bli tildelt klassen tabellfigurer:
< div klasse = ' proporsjonal-numre tekst-senter bg-slate-200 tekst-xl hover: tabell-numre' >< s > 121212 < / s >
< s > 838383 < / s >
< / div >
Det kan sees i koden ovenfor at ' div '-elementet er utstyrt med ' proporsjonale tall ”, som vil være standardkonvensjonen som de numeriske verdiene vil følge.
På samme måte, på grunn av ' hover:tabell-numre ”-klassen, vil de numeriske verdiene følge tabellformkonvensjonen når brukeren holder musepekeren over “div”-elementet.
Produksjon
I den gitte utgangen endres bredden på de numeriske verdiene når brukeren holder musen over elementet. Dette gir den visuelle forskjellen mellom proporsjonale og tabellformede figurer i Tailwind:
Det handler om proporsjonale og tabellformede tall i Tailwind.
Konklusjon
For å bruke proporsjonale tall i Tailwind, ' proporsjonale tall ” klasse brukes. De proporsjonale tallene bruker konvensjonen der hver numeriske verdi har en annen breddestørrelse. For å bruke tabellfigurene i Tailwind, ' tabell-numre ” klasse brukes. Tabellfigurene bruker konvensjonen der hver numeriske verdi har samme breddestørrelse. Denne artikkelen har gitt fremgangsmåten for bruk av proporsjonale og tabellformede tall i Tailwind.