Tailwind is a CSS framework that is efficient for creating responsive and adaptive designs. It has a variety of predefined utility classes for designing an element. Using these classes, the elements can be provided with different style properties. For instance, the “Numeric Font Variant” utility provides styling classes for a numeric value for different scenarios. Additionally, it also provides a reset class for removing any pre-applied “numeric font-variant” property on an element.

This article will provide the procedure for resetting the Numeric Font Variants in Tailwind.

How to Reset Numeric Font Variants in Tailwind CSS?

Tailwind provides various numeric font variant classes such as “oldstyle-nums”, “proportional-nums”, “diagonal-nums”, and so on that can be used to style the numeric values. These font variants can be reset to normal using the “normal-nums” class. The syntax for using the “normal-num” class is as follows:

It can be seen in the above-defined syntax that the “normal-nums” is provided in the “class” attribute of the element.

Let’s use the above-defined syntax to demonstrate the use of the “normal-nums” class Tailwind.

Using the “normal-nums” Class With Breakpoint & Media Queries

One use case for the “normal-nums” class is to use it with a breakpoint. The breakpoints are screen sizes with a specific minimum width that are used to make the design responsive and adaptive for multiple screens. In the below-provided code, a div element with an “old-styled” type numeric font is going to be reset when the “md” breakpoint gets reached:

The classes used in the above code are explained below:

• The “oldstyle-nums” class will provide the old-styled numeric font variant to the element.
• The “bg-{color}-{number}” class is responsible for the background color of the element.
• The “rounded-lg” class provides rounded corners to the element.
• The “md:normal-nums” class resets the numeric text to the regular font when the screen size reaches the minimum width of “768px”.
• The “text-center” class aligns the text content to the center of the element.
• The “text-2xl” class is responsible for the extra large font size of the text content.

The output for the above code is as follows:

In the above output, it can be seen that when the screen size exceeds “768px”, the old-styled font of the numbers resets to a regular font.

Note: The following table provides the minimum width for the default breakpoint classes:

Using the “normal-nums” Class With States

Tailwind provides default state utilities i.e. hover, focus, and active. Using the “normal-nums” class with these states will reset the numeric font variant to the regular font whenever any of these states are achieved. In the below-provided code, a div element with an old-styled numeric font is created. Then, on the “hover” state the selected numeric font variant gets reset:

In the above-provided code, the “hover: normal-nums” class will reset the numeric font to the regular font whenever the user hovers the mouse cursor over the div element. The output of the above code is demonstrated as follows:

It can be seen in the output that the numeric font resets back to normal whenever the mouse cursor hovers over the element.

That is all about resetting the numeric font variants in Tailwind.

Conclusion

The numeric font variant of an element can be reset to a regular font using the “normal-nums” class in Tailwind. It can be used with breakpoints or the default states for resetting the font dynamically. There are five default breakpoints in Tailwind i.e. “sm”, “md”, “lg”, “xl”, and “2xl” having the minimum screen width of “640px”, “768px”, “1024px”, “1280px”, and “1536px” respectively. Similarly, there are four default states in Tailwind i.e. “hover”, “focus”, “active”, and “disable”. This article has provided the procedure for resetting the numeric font variant of an element in Tailwind CSS.