How to use calc() in Tailwind CSS?

How to use Diagonal Fractions in Tailwind CSS ?

Last Updated : 24 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:

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

How to use calc() in Tailwind CSS?

bishalpaul34

Improve

Article Tags :

Similar Reads

How to use calc() in Tailwind CSS?

The calc() function in CSS allows you to perform calculations for property values dynamically. While Tailwind CSS doesnâ€™t directly support calc(), you can use it inline or with custom utilities. 1. Using Inline StylesYou can use calc() directly within the style attribute for dynamic property values.

How to use Radial Gradient in Tailwind CSS ?

A radial gradient is a graphical effect where colors transition in a circular or elliptical pattern. By default, the first color starts at the center and fades out to the edge of the element. Tailwind CSS makes it easy to implement radial gradients with its utility classes. We can use the below appr

How to use Google Fonts in Tailwind CSS?

Google Fonts in Tailwind CSS enhances webpage design with free and easy-to-use fonts. It provides a library of 1000+ fonts served by Google servers. Add the Google Fonts API link to your HTML file's <head>.Configure tailwind.config.js to include the font under fontFamily.Tailwind comes with th

How to set Transition duration in Tailwind CSS ?

In this article, we will see how to set transition duration in Tailwind CSS. Tailwind CSS is a highly customizable, utility-first CSS framework from which we can use utility classes to build any design. Transition duration class accepts lots of value in tailwind CSS in which all the properties are c

How to use font from local files globally in Tailwind CSS ?

Tailwind CSS is a utility-first framework that comes with a wide range of pre-configured styles. Among these are default font families such as sans, serif, and mono, which offer system fonts like Arial, Times New Roman, and Courier New. These fonts can be easily applied to HTML elements by adding th

How to use ::before and ::after elements in Tailwind CSS ?

In Tailwind CSS, we can use the ' :: before ' and ' :: after ' pseudo-elements by adding utility classes directly in your HTML. Simply apply the "before:" or "after:" prefix followed by the desired utility classes to style elements before or after their content. Using Utility ClassesTailwind CSS off

Tailwind CSS Text Decoration

This class accepts more than one value in tailwind CSS. All the properties are covered in class form. It is the alternative to the CSS text-decoration property. This class is used to â€œdecorateâ€ the content of the text. It is essentially decorating the text with different kinds of lines.Â Text Decora

How to use CSS Animations with Tailwind CSS ?

Tailwind CSS classes are used to style elements and apply animations effortlessly. Utilize Tailwind's animation utility classes to add dynamic visual effects. Combine Tailwind CSS with custom CSS animations for versatile and engaging web designs. Table of Content Tailwind CSS Animation Utility Class

How to Change the Underline Color in Tailwind CSS ?

The Tailwind underline class adds an underline to the text, and the decoration-color class changes the color of the text-decoration property. Both classes can be used together to add an underline and color to the text. Syntax: The syntax for the tailwind underline and decoration-color classes is as

How to Modify Hover Effect using Tailwind CSS ?

In Tailwind CSS, the term "modify hover" refers to changing the styles that are applied to an element when it is hovered over. With Tailwind CSS "hover" variation, you can quickly apply particular utility classes and custom classes to control how components appear when you hover over them, giving yo