Hur man använder diagonala bråk i Tailwind Css

Den här artikeln kommer att förklara hur man använder diagonala bråk i Tailwind.

Hur man använder diagonala bråk i Tailwind CSS?

Diagonalbråkklassen i Tailwind är en fördefinierad numerisk typsnittsvariant som gör täljaren och nämnaren mindre och separerar dem med ett snedstreck. Detta gör att bråktalet verkar särskiljande från resten av texten.

Syntax

Syntaxen för att använda ' diagonal-fraktioner ' klass är som följer:

Som du kan se från ovanstående syntax måste utvecklaren tillhandahålla ' diagonal-fraktioner ' i ' klass ' attribut för elementet.

Låt oss använda klassen 'diagonalbråk' som ett praktiskt exempel. I nedanstående demonstration kan användaren se skillnaden mellan normalbråken och diagonalbråken:

Förklaringen av ovanstående kod är följande:

• den ' div element skapas och tillhandahålls som bakgrundsfärg med hjälp av ' bg-{color}-{number} ' klass.
• Sedan får texten en stor teckenstorlek och justeras mot mitten av elementet med hjälp av ' text-lg ' och ' text-center ” klasser respektive.
• Därefter två '

  '-element skapas, där det andra är försett med ' diagonal-fraktioner ' klass.

Produktion:

Skillnaden mellan diagonalbråket och normalbråket kan tydligt ses i ovanstående utdata.

Använda diagonalbråkklass med brytpunkter

Brytpunkterna används som mediafrågor i Tailwind. Det finns fem standardbrytpunkter med specificerade minimibredder. Dessa brytpunkter kan användas med vilken klass som helst i Tailwind för att skapa responsiva och dynamiska designlayouter.

För att använda ' diagonal-fraktioner ” klass med en brytpunkt i Tailwind används följande syntax:

Tabellen nedan ger den minsta bredden för olika brytpunkter i Tailwind:

Låt oss använda brytpunkter med ' diagonal-fraktioner ” klass för att praktiskt förstå deras användning:

I den ovan angivna koden finns ett div-element i ' md:diagonal-bråk ' klass som kommer att ändra teckensnittet för de numeriska bråken när ' md ” brytpunkten nås.

Produktion

Som du kan se i utdata, är bråktalen försedda med teckensnittet diagonalbråk när ' md ' brytpunkt nås:

Använda den diagonala bråkklassen med medvindstillstånd

Tailwind tillhandahåller standard ' stater ” för att ge designegenskaper till ett element när det specifika tillståndet utlöses. Detta gör designlayouten mer tilltalande och dynamisk. För att använda klassen 'diagonal-fraktioner' med ett tillstånd i Tailwind, används följande syntax:

Standardtillståndet som tillhandahålls av Tailwind är följande:

• Sväva: När användaren håller markören över elementet.
• Fokus: När användaren fokuserar på ett element genom att navigera till det.
• Aktiva: När användaren aktiverar ett element genom att klicka på det.
• Inaktivera: När användaren inte får aktivera ett element.

Nedanstående demonstration ger ett praktiskt exempel på hur du använder ' diagonal-fraktioner ' klass med ' sväva ” ange i Tailwind:

den ' div '-elementet i ovanstående kod tillhandahålls av en ' hover:diagonal-fraktioner ” klass som kommer att ändra det normala teckensnittet för bråktalen till det diagonala bråkteckensnittet.

Produktion

Som du kan se i utgången ändras det numeriska teckensnittet för bråktalet när användaren för muspekaren över det:

Det handlar om att använda diagonalbråkklassen i Tailwind CSS.

Slutsats

För att använda de diagonala bråken i Tailwind CSS, använd ' diagonal-fraktion ' klass. Denna klass kommer att separera täljaren och nämnaren med ett snedstreck och göra dem små. Användare kan också använda klassen 'diagonal-fraktioner' med standardbrytpunkter och tillstånd i Tailwind för att göra designen mer dynamisk. Den här artikeln har tillhandahållit proceduren för att använda de diagonala bråken i Tailwind.