Horje
How to use Diagonal Fractions in Tailwind CSS ?

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>

Output:

Screenshot-2024-02-05-144806


 


Reffered: https://www.geeksforgeeks.org

Tailwind CSS

Related
What is the purpose of @apply Directive in Tailwind CSS ? What is the purpose of @apply Directive in Tailwind CSS ?
How to use the skew and skew-y Classes in Tailwind CSS ? How to use the skew and skew-y Classes in Tailwind CSS ?
How to use line-clamp Class for Text Truncation in Tailwind CSS ? How to use line-clamp Class for Text Truncation in Tailwind CSS ?
Tailwind CSS Outline Tailwind CSS Outline
Tailwind CSS Border Collapse Tailwind CSS Border Collapse

Type:
 Geek
Category:
 Coding
Sub Category:
 Tutorial
Uploaded by:
 Admin
Views:
 15



 

Horje