How to Use Diagonal Fractions in Tailwind Css

Tailwind provides various predefined classes for providing the design properties to elements in an HTML document. It makes the design procedure efficient and faster. Using Tailwind, the developer can style their webpages through design properties such as font, size, weight, width, and colors. Additionally, it provides various numeric fonts for making the numeric data on the webpage more presentable.

This article will explain how to use diagonal fractions in Tailwind.

How to Use Diagonal Fractions in Tailwind CSS?

The diagonal fraction class in Tailwind is a predefined numeric font variant that makes the numerator and denominator smaller and separates them by a slash. This makes the fraction number seem distinctive from the rest of the text.


The syntax of using the “diagonal-fractions” class is as follows:

<div class="diagonal-fractions">
    <!-- fractional numbers -->

As you can see from the above syntax, the developer has to provide “diagonal-fractions” in the “class” attribute of the element.

Let’s use the “diagonal-fractions” class as a practical example. In the below demonstration, the user can see the difference between the normal fractions and the diagonal fractions:

<div class="bg-slate-200 text-center text-lg">
    <p>Normal Fractions: 3/5 6/3 6/5</p>
    <p class="diagonal-fractions">Diagonal Fractions: 3/5 6/3 6/5</p>

The explanation of the above code is as follows:

  • The “div” element is created and provided as the background color using the “bg-{color}-{number}” class.
  • Then, the text is provided a large font size and is aligned to the center of the element using the “text-lg” and “text-center” classes respectively.
  • Next, two “<p>” elements are created, where the second is provided with the “diagonal-fractions” class.


The difference between the diagonal fraction and the normal fraction can be clearly seen in the above output.

Using Diagonal Fraction Class With Breakpoints

The breakpoints are used as the media queries in Tailwind. There are five default breakpoints with specified minimum widths. These breakpoints can be used with any class in Tailwind to create responsive and dynamic design layouts.

To use the “diagonal-fractions” class with a breakpoint in Tailwind, the following syntax is used:

{breakpoint prefix}: diagonal-fraction

The below table provides the minimum width for different breakpoints in Tailwind:

Breakpoint Prefix Minimum Width
sm 640px
md 768px
lg 1024px
xl 1280px
2xl 1536px

Let’s use breakpoints with the “diagonal-fractions” class to practically understand their use:

<div class="bg-slate-200 text-center text-lg md:diagonal-fractions">
    3/4 , 7/8 ,  5/4 , 6/5

In the above-provided code, a div element is provided in the “md:diagonal-fractions” class that will change the font of the numeric fractions when the “md” breakpoint is reached.


As you can see in the output, the fractional numbers are provided with the diagonal fraction font when the “md” breakpoint is reached:

Using the Diagonal Fraction Class With Tailwind States

Tailwind provides default “states” in order to provide design properties to an element when that specific state is triggered. This makes the design layout more appealing and dynamic. In order to use the “diagonal-fractions” class with a state in Tailwind, the following syntax is used:

{state}: diagonal-fraction

The default state provided by Tailwind is as follows:

  • Hover: When the user hovers the cursor over the element.
  • Focus: When the user focuses on an element by navigating to it.
  • Active: When the user activates an element by clicking on it.
  • Disable: When the user is not allowed to activate an element.

The below demonstration provides a practical example of using the “diagonal-fractions” class with the “hover” state in Tailwind:

<div class="bg-slate-200 text-center text-lg hover:diagonal-fractions">
    3/4 , 7/8 ,  5/4 , 6/5

The “div” element in the above code is provided by a “hover:diagonal-fractions” class that will change the normal font of the fraction numbers to the diagonal fraction font.


As you can see in the output, the numeric font of the fraction number changes as the user hovers the mouse cursor over it:

That is all about using the diagonal fraction class in Tailwind CSS.


To use the diagonal fractions in Tailwind CSS, use the “diagonal-fraction” class. This class will separate the numerator and the denominator with a slash and make them small. Users can also use the “diagonal-fractions” class with the default breakpoints and states in Tailwind to make the design more dynamic. This article has provided the procedure for using the diagonal fractions in Tailwind.

About the author

Shaheer Ahmad

I am a Technical Author and Software Engineer with a passion for translating complex concepts into accessible insights. I like to be deeply engaged in the world of technology and craft clear and engaging documentation that provides complex software solutions.