Tailwind CSS Font Variant Numeric

Tailwind CSS provides utility classes to control the appearance of numbers, fractions, and ordinal markers in text. These utilities correspond to the CSS font-variant-numeric property and allow you to display numbers in different styles, depending on the font's supported features.

• normal-nums: Displays numbers in their normal style and resets numeric font variants.
• ordinal: Uses special glyphs for ordinal markers, such as 1st, 2nd, and 3rd, when supported by the font.
• slashed-zero: Displays zero with a slash to help distinguish 0 from O.
• lining-nums: Displays numerals aligned along the baseline.
• oldstyle-nums: Uses old-style numerals, where some digits extend below the baseline.
• proportional-nums: Uses numerals with proportional widths.
• tabular-nums: Uses numerals with uniform widths, making them easier to align in tables.
• diagonal-fractions: Displays fractions with a smaller numerator and denominator separated by a diagonal slash.
• stacked-fractions: Displays fractions with a smaller numerator and denominator arranged vertically and separated by a horizontal line.

Note: The appearance of these classes depends on the font family. Some fonts may not support all numeric variants.

Syntax

<element class="utility-class">...</element>

Replace utility-class with the desired utility, such as tabular-nums, ordinal, or diagonal-fractions.

Example:

<!--Driver Code Starts-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind CSS Font Variant Numeric</title>
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<!--Driver Code Ends-->

<body class="p-6">
    <h1 class="text-3xl font-bold text-green-600 mb-4">
        Tailwind CSS Font Variant Numeric
    </h1>

    <div class="space-y-3">
        <p class="normal-nums">normal-nums: 1234567890</p>
        <p class="ordinal">ordinal: 1st, 2nd, 3rd, 4th</p>
        <p class="slashed-zero">slashed-zero: 0 0 0</p>
        <p class="lining-nums">lining-nums: 1234567890</p>
        <p class="oldstyle-nums">oldstyle-nums: 1234567890</p>
        <p class="proportional-nums">proportional-nums: 12121 90909</p>
        <p class="tabular-nums">tabular-nums: 12121 90909</p>
        <p class="diagonal-fractions">diagonal-fractions: 1/2 3/4 5/6</p>
        <p class="stacked-fractions">stacked-fractions: 1/2 3/4 5/6</p>
    </div>
</body>

<!--Driver Code Starts-->
</html>
<!--Driver Code Ends-->

Output: The page displays sample text for each font variant numeric utility. The actual appearance of the numbers and fractions depends on the selected font's support for these features.