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> < head >
< link href =
"https://unpkg.com/tailwindcss@^1.0/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: