Font-weight is an to apply the weight of an font in an applicaiton.
Normal html has different properties as given below
Native html and css has standard properties
font-weight: bold
or
font-weight: number
Here, number is an value that represents how much bold is required for an font.
It has following values
| number | boldness |
|---|---|
| 100 | thin |
| 200 | extralight |
| 300 | light |
| 400 | normal |
| 500 | medium |
| 600 | extra bold |
| 700 | bold |
| 800 | Extra Bold |
| 900 | heavy black |
Tailwind font weight
font weights can be applied with font-{weight} property values
font-weight: font-{weight}
weighth is one of the value below.
| utility | number | boldness |
|---|---|---|
| font-thin | 100 | thin |
| font-extralight | 200 | extralight |
| font-light | 300 | light |
| font-normal | 400 | normal |
| font-medium | 500 | medium |
| font-bold | 600 | extra bold |
| font-semibold | 700 | bold |
| font-extrabold | 800 | Extra Bold |
| font-black | 900 | heavy black |
Here is an examples
<div class="font-bold"> bold font</div>
<div class="font-extrabold"> extra bold font</div>
font weight applied with different states
<div class="font-normal hover:font-bold">normal font with hover bold font</div>
<div class="font-normal focus:font-bold">bold font with focus bold font</div>
<div class="font-normal first-child:font-bold">bold font with first child bold</div>
Media queries such as lg, md,sm also applied to this
<div class="font-normal lg:font-bold">normal font with large screen bold font</div>
<div class="font-normal md:font-bold">bold font with medium screen bold font</div>
<div class="font-bold sm:font-normal">bold font with small screen normal font</div>