Font Variant Numeric

v1.8.0+

Utilities for controlling the variant of numbers.

Use the utilities to enable additional glyphs for numbers, fractions, and ordinal markers (in fonts that support them).

These utilities are composable so you can enable multiple font-variant-numeric features by combining multiple classes in your HTML:

Note that many fonts don’t support these features (stacked fractions support for example is especially rare), so some of these utilities may have no effect depending on the font family you are using.

Use the .ordinal utility to enable special glyphs for the ordinal markers.

<p class="ordinal ...">1st</p>

Slashed Zero

Use the .slashed-zero utility to force a 0 with a slash; this is useful when a clear distinction between O and 0 is needed.

<p class="slashed-zero ...">0</p>

Lining figures

<p class="lining-nums ...">1234567890</p>

Use the .oldstyle-nums utility to use numeric glyphs where some numbers have descenders. This corresponds to the onum OpenType feature.

Proportional figures

Use the .proportional-nums utility to use numeric glyphs that have proportional widths (rather than uniform/tabular). This corresponds to the pnum OpenType feature.

<p class="proportional-nums ...">12121</p>
<p class="proportional-nums ...">90909</p>

Tabular figures

Use the .tabular-nums utility to use numeric glyphs that have uniform/tabular widths (rather than proportional). This corresponds to the OpenType feature.

<p class="tabular-nums ...">12121</p>
<p class="tabular-nums ...">90909</p>

Use the .diagonal-fractions utility to replace numbers separated by a slash with common diagonal fractions. This corresponds to the frac OpenType feature.

<p class="diagonal-fractions ...">1/2 3/4 5/6</p>

Stacked fractions

Resetting numeric font variants

Use the .normal-nums propery to reset numeric font variants. This is usually useful for resetting a font feature at a particular breakpoint:

To control font-variant-numeric property of an element at a specific breakpoint, add a {screen}: prefix to any existing font-variant-numeric utility. For example, use md:tabular-nums to apply the tabular-nums utility at only medium screen sizes and above.

<div class="proportional-nums md:tabular-nums">
</div>

For more information about Tailwind’s responsive design features, check out the Responsive Design documentation.

By default, only responsive variants are generated for font variant numeric utilities.

You can control which variants are generated for the font variant numeric utilities by modifying the fontVariantNumeric property in the variants section of your tailwind.config.js file.

For example, this config will also generate hover and focus variants:

  // tailwind.config.js
  module.exports = {
    variants: {
      // ...
-     fontVariantNumeric: ['responsive'],
+     fontVariantNumeric: ['responsive', 'hover', 'focus'],
    }
  }

Disabling

If you don’t plan to use the font variant numeric utilities in your project, you can disable them entirely by setting the fontVariantNumeric property to false in the corePlugins section of your config file:

← Font Weight