How to use Diagonal Fractions in Tailwind CSS ?

Last Updated : 05 Feb, 2024

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:

Screenshot-2024-02-04-172356

Example 2: Implementation of Diagonal Fractions in 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>Using Normal Fractions: 1/2 2/3 3/4</p> 
        <hr> 
        <p class="text-3xl font-bold diagonal-fractions"> 
            Using Diagonal Fractions: 1/2 2/3 3/4 
        </p> 
    </div> 
</body> 
  
</html>