Tailwind Font Variant Numerics
Tailwind font variant numeric class enables you to manage the numeric glyphs of your text. It comes in handy when you require a specific format to display numbers, for example, in financial data or code snippets.
In this article, we will explore what font variant numeric styles are and how they can be used in Tailwind CSS.
Tailwind font variant numeric styles refer to a set of font properties that allow you to change the appearance of numerals in your text.
These properties include lining, old-style, proportional, tabular, and diagonal fractions.
These styles are useful for creating beautiful and consistent typography on your website, especially when working with financial data, mathematical formulas, or any content that requires precise and consistent numerical display.
Tailwind Font Variant Numeric Classes
| Classes | Overview |
| normal-nums | It applies the default numeric styling to the selected text with no special styling applied to them. |
| ordinal | This class renders ordinal numbers in superscript format. An ordinal number is a number that represents a position in a sequence (for example, 1st, 2nd, 3rd). |
| slashed-zero | Using this class allows you to display the number zero with a slash. This can be useful in contexts where it’s needed to distinguish between the number zero and the letter “O”. |
| lining-nums | This class allows you to customize the style of your numbers. The “lining-nums” class ensures that all numbers in your text have a consistent size and shape, which can make your design look more polished. |
| oldstyle-nums | This class changes the style of your numbers to old-style numerals. Old-style numerals are a type of numeral that has a varying baseline. |
| proportional-nums | This class controls the display of numbers in a proportional font, where each number occupies a different amount of horizontal space. |
| tabular-nums | This property controls how numbers are displayed in a font, precisely when aligned in tables or columns. This class displays numbers in text with uniform widths. |
| diagonal-fractions | It controls how fractions are displayed in text. This class will display fractions within an element’s text with a diagonal line separating the numerator and denominator when applied to that element. |
| stacked-fractions | The purpose of this class is to enable the use of stacked fractions in your text. It is common to use stacked fractions in mathematical and scientific documents to display fractions in a more compact and readable format. |
Syntax
<element class="Font-Variant-Numeric">...</element>
Below is an example implements lining-nums, oldstyle-nums and proportional-nums classes of Tailwind font variant numeric:
