Applying numeric variants
font-variant-numeric 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:
<p class="ordinal slashed-zero tabular-nums ..."> 1234567890 </p>
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.
ordinal utility to enable special glyphs for the ordinal markers.
<p class="ordinal ...">1st</p>
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-nums utility to use the numeric glyphs that are all aligned by their baseline. This corresponds to the
lnum OpenType feature. This is the default for most fonts.
<p class="lining-nums ..."> 1234567890 </p>
oldstyle-nums utility to use numeric glyphs where some numbers have descenders. This corresponds to the
onum OpenType feature.
<p class="oldstyle-nums ..."> 1234567890 </p>
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-nums utility to use numeric glyphs that have uniform/tabular widths (rather than proportional). This corresponds to the
tnum OpenType feature.
<p class="tabular-nums ..."> 12121 </p> <p class="tabular-nums ..."> 90909 </p>
diagonal-fractions utility to replace numbers separated by a slash with common diagonal fractions. This corresponds to the
frac OpenType feature.
1/2 3/4 5/6
<p class="diagonal-fractions ..."> 1/2 3/4 5/6 </p>
stacked-fractions utility to replace numbers separated by a slash with common stacked fractions. This corresponds to the
frac OpenType feature. Very few fonts seem to support this feature — we’ve used Ubuntu Mono here.
1/2 3/4 5/6
<p class="stacked-fractions ..."> 1/2 3/4 5/6 </p>
Resetting numeric font variants
normal-nums propery to reset numeric font variants. This is usually useful for resetting a font feature at a particular breakpoint:
<p class="slashed-zero tabular-nums md:normal-nums ..."> 12345 </p>
Hover, focus, and other states
Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use
hover:tabular-nums to only apply the
tabular-nums utility on hover.
<p class="proportional-nums hover:tabular-nums"> <!-- ... --> </p>
For a complete list of all available state modifiers, check out the Hover, Focus, & Other States documentation.
Breakpoints and media queries
You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use
md:tabular-nums to apply the
tabular-nums utility at only medium screen sizes and above.
<p class="proportional-nums md:tabular-nums"> <!-- ... --> </p>