Font Feature Settings
Use the font-features-[<value>] utility to enable arbitrary OpenType features
in fonts that support them.
Basic example
Section titled “Basic example”Use the font-features-[<value>] utility to enable OpenType features in fonts
that support them:
Style('font-features-[\'smcp\'] ...', child: Text('This text uses small caps.'))Combining multiple features
Section titled “Combining multiple features”You can enable multiple OpenType features by separating them with commas:
Style('font-features-[\'smcp\',\'onum\'] ...', child: Text('This text uses small caps and oldstyle numbers.'))Using CSS variables
Section titled “Using CSS variables”Tailwind v4 lets you use the font-features-(<custom-property>) syntax to apply
font feature settings from a CSS variable:
<p class="font-features-(--my-features) ...">…</p>style resolves this against theme-defined StyleThemeData.customProperties.
Substitution is purely textual, so the property value must include the same
quoted-tag syntax the bracket form expects — with
customProperties: {'--my-features': "'smcp'"},
font-features-(--my-features) behaves like font-features-['smcp'].
Cascade-inherited or JS-set CSS variables remain out of scope.
Responsive design
Section titled “Responsive design”Tailwind v4 also supports breakpoint-aware feature toggles:
<p class="font-features-['tnum'] md:font-features-['smcp']">…</p>The breakpoint variant md: works at runtime; the bracket payload is parsed at
class-string time so each variant gets its own list of FontFeatures.
Class reference
Section titled “Class reference”| Class | Effect |
|---|---|
font-features-[<value>] | Comma-separated 4-character OpenType tags, each emitted as a FontFeature. |
font-features-(<custom-property>) | Resolved against theme-defined StyleThemeData.customProperties; no-op if undefined. |