Tailwind CSS Font Weight

This class accepts lots of value in tailwind CSS in which all the properties are covered in class form. It is the alternative to the CSS font-weight property. This class is used to set the weight or thickness of the font being used with the HTML Text. The font-weight applied will depend on the font-family used in the browser. For example, some font-family is available only in specific weights.

Font weight classes:

• font-thin: This class sets the font-weight to 100.
• font-extralight: This class sets the font-weight to 200.
• font-light: This class sets the font-weight to 300.
• font-normal: This class sets the font-weight to 400.
• font-medium: This class sets the font-weight to 500.
• font-semibold: This class sets the font-weight to 600.
• font-bold: This class sets the font-weight to 700.
• font-extrabold: This class sets the font-weight to 800.
• font-black: This class sets the font-weight to 900.

Note: Change the weight in the component with the required weight mentioned above.

Syntax:

<element class="font-{weight}">...</element>

Example:

Output: