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:
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: