Font Weight & Style

Control weight, style, and number rendering with a single set of font utilities.

4 min read Level 1/5 #tailwind#typography

What you'll learn

Use the font-thin through font-black weight scale
Apply italic and not-italic
Use tabular-nums and font-stretch

Weight is the fastest way to create hierarchy without changing size or color. Tailwind exposes the full range plus a few typographic refinements.

The Weight Scale

Weights map to the standard 100–900 axis:

<p class="font-light">font-light (300)</p>
<p class="font-normal">font-normal (400)</p>
<p class="font-semibold">font-semibold (600)</p>
<p class="font-bold">font-bold (700)</p>
<p class="font-black">font-black (900)</p>

With a variable font loaded, each weight maps directly onto the font’s weight axis, so the steps interpolate smoothly.

Style and Italics

<em class="italic">Emphasised aside.</em>
<span class="not-italic">Force upright inside an em.</span>

Numeric Rendering

Tables and figures look much tidier with fixed-width digits so columns line up:

<td class="tabular-nums">1,204.50</td>
<td class="tabular-nums">  98.00</td>

tabular-nums opts into the font’s monospaced number set — every digit gets the same advance width.

Font Stretch

Variable fonts with a width axis respond to font-stretch-*:

<h2 class="font-stretch-condensed text-2xl font-bold">Condensed heading</h2>
<p class="font-stretch-expanded">A slightly wider run of text.</p>

Text Alignment & Decoration →