Hvordan bruke diagonale brøker i Tailwind Css

Denne artikkelen vil forklare hvordan du bruker diagonale brøker i Tailwind.

Hvordan bruke diagonale brøker i Tailwind CSS?

Diagonalbrøkklassen i Tailwind er en forhåndsdefinert numerisk skriftvariant som gjør telleren og nevneren mindre og skiller dem med en skråstrek. Dette gjør at brøktallet virker særegent fra resten av teksten.

Syntaks

Syntaksen for å bruke ' diagonal-brøker klasse er som følger:

Som du kan se fra syntaksen ovenfor, må utvikleren gi ' diagonal-brøker ' i ' klasse ”-attributtet til elementet.

La oss bruke klassen 'diagonale brøker' som et praktisk eksempel. I demonstrasjonen nedenfor kan brukeren se forskjellen mellom normalbrøkene og diagonalbrøkene:

Forklaringen av koden ovenfor er som følger:

• « div element opprettes og angis som bakgrunnsfarge ved hjelp av ' bg-{color}-{number} ' klasse.
• Deretter får teksten en stor skriftstørrelse og justeres til midten av elementet ved å bruke ' tekst-lg ' og ' tekst-senter henholdsvis 'klasser.
• Deretter to '

  '-elementer opprettes, hvor det andre er utstyrt med ' diagonal-brøker ' klasse.

Produksjon:

Forskjellen mellom diagonalbrøken og normalbrøken kan tydelig sees i utgangen ovenfor.

Bruk av diagonalbrøkklasse med bruddpunkter

Knekkpunktene brukes som mediespørringer i Tailwind. Det er fem standardbruddpunkter med spesifiserte minimumsbredder. Disse bruddpunktene kan brukes med hvilken som helst klasse i Tailwind for å lage responsive og dynamiske designoppsett.

For å bruke ' diagonal-brøker ” klasse med et bruddpunkt i Tailwind, brukes følgende syntaks:

Tabellen nedenfor gir minimumsbredden for forskjellige bruddpunkter i Tailwind:

La oss bruke bruddpunkter med ' diagonal-brøker klasse for å praktisk talt forstå bruken:

I den ovenfor angitte koden er et div-element gitt i ' md: diagonal-brøker '-klassen som vil endre fonten til de numeriske brøkene når ' md ” bruddpunktet er nådd.

Produksjon

Som du kan se i utdataene, er brøktallene forsynt med den diagonale brøkskriften når ' md bruddpunktet er nådd:

Bruk av diagonalbrøkklassen med medvindstilstander

Tailwind gir standard ' stater ” for å gi designegenskaper til et element når den spesifikke tilstanden utløses. Dette gjør designoppsettet mer tiltalende og dynamisk. For å bruke klassen 'diagonal-brøker' med en tilstand i Tailwind, brukes følgende syntaks:

Standardtilstanden gitt av Tailwind er som følger:

• Sveve: Når brukeren holder markøren over elementet.
• Fokus: Når brukeren fokuserer på et element ved å navigere til det.
• Aktiv: Når brukeren aktiverer et element ved å klikke på det.
• Deaktiver: Når brukeren ikke har lov til å aktivere et element.

Demonstrasjonen nedenfor gir et praktisk eksempel på bruk av ' diagonal-brøker ' klasse med ' sveve ” oppgi i Tailwind:

« div '-elementet i koden ovenfor leveres av en ' hover:diagonal-brøker ” klasse som vil endre den normale fonten til brøktallene til den diagonale brøkskriften.

Produksjon

Som du kan se i utdataene, endres den numeriske fonten til brøknummeret når brukeren holder musepekeren over det:

Det handler om å bruke diagonalbrøkklassen i Tailwind CSS.

Konklusjon

For å bruke diagonalbrøkene i Tailwind CSS, bruk ' diagonal-brøk ' klasse. Denne klassen vil skille telleren og nevneren med en skråstrek og gjøre dem små. Brukere kan også bruke 'diagonal-brøker'-klassen med standard bruddpunkter og tilstander i Tailwind for å gjøre designet mer dynamisk. Denne artikkelen har gitt fremgangsmåten for bruk av diagonalbrøkene i Tailwind.