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:
HTML
<!DOCTYPE html>
<html>
<head>
<link href="https://unpkg.com/[email protected]/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="text-center mx-4 space-y-2">
<h1 class="text-green-600 text-5xl font-bold">
GeeksforGeeks
</h1>
<b>Tailwind CSS Font Weight Class</b>
<div class="mx-24 bg-green-200">
<p class="p-2 text-justify">
font-thin:
<span class="font-thin pl-10">
A Computer Science portal for Geeks
</span>
</p>
<p class="p-2 text-justify">font-normal:
<span class="font-normal pl-4">
A Computer Science portal for Geeks
</span>
</p>
<p class="p-2 text-justify">font-medium:
<span class="font-medium pl-2">
A Computer Science portal for Geeks
</span>
</p>
<p class="p-2 text-justify">font-bold:
<span class="font-bold pl-8">
A Computer Science portal for Geeks
</span>
</p>
<p class="p-2 text-justify">font-black:
<span class="font-black pl-6">
A Computer Science portal for Geeks
</span>
</p>
</div>
</body>
</html>
Output:
