Font weight controls how thick or thin your text appears. Tailwind provides utilities for every standard weight, making it easy to create visual hierarchy in your typography.
Available weights
Tailwind includes utilities from thin to black, matching common font weight values.
<p class="font-thin">Thin — weight 100</p>
<p class="font-extralight">Extra Light — weight 200</p>
<p class="font-light">Light — weight 300</p>
<p class="font-normal">Normal — weight 400 (default)</p>
<p class="font-medium">Medium — weight 500</p>
<p class="font-semibold">Semibold — weight 600</p>
<p class="font-bold">Bold — weight 700</p>
<p class="font-extrabold">Extra Bold — weight 800</p>
<p class="font-black">Black — weight 900</p>
When to use which
For body text, stick with font-normal or font-medium. Use font-semibold for subheadings and font-bold for main headings. The extreme weights like font-thin and font-black work well for display text or hero sections where you want dramatic contrast.
Combining with size
Font weight pairs naturally with text size. A common pattern is to use bold for headings and normal weight for body copy.
<h2 class="text-2xl font-bold text-gray-900">Section Heading</h2>
<p class="text-base font-normal text-gray-600 mt-2">
Body text with normal weight.
</p>