Tailwind Crash Course - Project Based Learning
Font Weight
This is very important. We have font weight numbering similar to the color shades. Let’s take a look at it’s formula and it’s information. Here is the syntax:
font-{weight}
|
Weights |
Font Weight |
|
hairline thin light normal medium bold semibold extrabold black |
100 200 300 400 500 600 700 800 900 |
Let me show you how it works.
<p class="italic">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam suscipit orci ac nisl varius varius.
<span class=“font-black”>Nullam auctor finibus pulvinar.</span>
Morbi porttitor placerat enim nec consequat.
</p> 👇 Here as a result, you can see nice and black text in the middle of the content.
To be honest, most of the time, you are going to use normal semibold bold and black. Some of these like hairline thin and light, most fonts do not even support that. So, Just keep in mind.
