Font Weight is the boldness or thickness of a text in any given font style or size. It can be used to bolden a particular text message to emphasize its importance. For that purpose, Tailwind also provides various utilities to control the font weight of an element. Using these utilities, a text can be made “light”, “bold”, “semibold”, or can be provided a customized font weight using an arbitrary font-weight class.

This article will provide the procedure for controlling the font weight of an element in Tailwind using the following outline:

• Using the Preset Font Weight Utilities
• Using an Arbitrary Font Weight Utility

How to Control the Font Weight of an Element in Tailwind Using the Preset Font Weight Utilities?

Whenever a font-weight class is used in a Tailwind element, an equivalent “font-weight” CSS property is assigned to the element. The syntax for using the font weigh utility in Tailwind is as follows:

The below-given table provides the font-weight value for its equivalent class in Tailwind:

In order to understand the Tailwind font-weight utility better, let’s use it practically to apply different font weights to text elements:

The explanation for the above code is as follows:

• First, create five “<div>” elements and separate each of them by adding a line break element “<br>”.
• The “text-center” class is assigned to align the text content in the center of the element.
• The “bg-{color}-{number}” class is applied to provide a background color to an element.
• Different font weights are provided to all the div elements using the “font-{weight}” class.

The output for the above-explained code is as follows:

How to Control the Font Weight of an Element in Tailwind Using an Arbitrary Font Weight Utility?

The values of the preset font-weight utilities may limit the user from using the customized font-weight. For that purpose, an “Arbitrary Font Weight” utility can be used to provide customized thickness to the font. The syntax for using arbitrary font weight utility in Tailwind is as follows:

Let’s compare the font weights of two elements, where one is set using the preset font-weight class and the other with an arbitrary font-weight class:

Here, the first “div” element provided an arbitrary font weight using the “font-[1000]” class. Whereas, the second “div” element provided a preset font weight using the “font-bold” class. The output of the above code is as follows:

That is all about controlling the font-weight of an element in Tailwind.

Conclusion

To apply font weight to an element, the “font-{weight}” class of Tailwind is used. For example, a “font-bold” class in Tailwind will assign the element a “font-weight” CSS property of “700”. In order to provide a customized font weight, the “font-[arbitrary weight]” class is used. This article has provided the procedure for controlling the font-weight of an element in Tailwind.