Font Stretch

Use font-stretch-{value} utilities to set the width of a font face. This only applies to fonts that have multiple width variations available; otherwise the browser (or in Flutter, the rasterizer) selects the closest match.

Note: Variable-axis stretch only renders visibly when the active typeface exposes the wdth axis. The bundled Inter.ttf has wght and slnt only, so the values render identically on the playground goldens — the resolver still emits a FontVariation('wdth', value) so any user-bundled wdth-capable font picks it up automatically.

---

Basic example

Use utilities like font-stretch-condensed and font-stretch-expanded:

Style('font-stretch-extra-condensed', child: Text('The quick brown fox...'))
Style('font-stretch-condensed', child: Text('The quick brown fox...'))
Style('font-stretch-normal', child: Text('The quick brown fox...'))
Style('font-stretch-expanded', child: Text('The quick brown fox...'))
Style('font-stretch-extra-expanded', child: Text('The quick brown fox...'))

Using percentages

Use font-stretch-<percentage> like font-stretch-50% and font-stretch-150%:

Style('font-stretch-50%', child: Text('The quick brown fox...'))
Style('font-stretch-100%', child: Text('The quick brown fox...'))
Style('font-stretch-150%', child: Text('The quick brown fox...'))

Using CSS variables

Tailwind v4 supports font-stretch-(<custom-property>):

<p class="font-stretch-(--my-width) ...">…</p>

style resolves this against theme-defined StyleThemeData.customProperties: with customProperties: {'--my-width': '125%'}, font-stretch-(--my-width) behaves like font-stretch-[125%]. Cascade-inherited or JS-set CSS variables remain out of scope.

Class reference

Class	wdth
font-stretch-ultra-condensed	50%
font-stretch-extra-condensed	62.5%
font-stretch-condensed	75%
font-stretch-semi-condensed	87.5%
font-stretch-normal	100%
font-stretch-semi-expanded	112.5%
font-stretch-expanded	125%
font-stretch-extra-expanded	150%
font-stretch-ultra-expanded	200%
font-stretch-<percentage>	numeric percentage
font-stretch-[<value>]	arbitrary numeric width
font-stretch-(<custom-property>)	Resolved against theme-defined StyleThemeData.customProperties; no-op if undefined.