How to use Diagonal Fractions in Tailwind CSS ?

Last Updated : 28 Apr, 2025

Tailwind CSS diagonal-fractions utility allows you to display numbers separated by a slash as common diagonal fractions. This activates those sets of figures where the numerator and denominator appear small and are separated by a slash.

Syntax:

<element class="diagonal-fractions">  
     Content
 </element>

Diagonal-fractions Utility

The diagonal-fractions utility in Tailwind CSS helps in the creation of diagonal fractions. By applying this utility class, you can easily add a diagonal line to fractions, enhancing the visual representation of mathematical content.

Approach:

Start with a basic HTML structure and Include the Tailwind CSS CDN in the head for styling.
Utilize the diagonal-fractions class in your HTML. Apply it to elements containing fractions for automatic diagonal styling.
Achieve a visually appealing display of fractions and also ensure a responsive design with the `min-h-screen` and flex properties.
Insert fractions into the designated HTML element and make a stylish representation using Tailwind's diagonal-fractions utility.

Example: Implementation to show how to use Fractions using Tailwind CSS.

HTML

<!doctype HTML>
<html>

<head>
    <title>Diagonal Fraction</title>
    <meta charset="UTF-8">
    <meta name="viewport" content=
          "width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body>
    <div class="min-h-screen flex items-center justify-center">
        <p class="text-3xl font-bold diagonal-fractions">
          1/2 2/3 3/4
          </p>
    </div>
</body>

</html>

Output:

Example 2: Implementation of Diagonal Fractions in Tailwind CSS.

HTML