flutterbits

Typography

Text color, size, weight, leading, tracking, alignment, family, decoration, line-clamp/truncate, wrapping, and text shadow — inherited through DefaultTextStyle.

Typography setters ride DefaultTextStyle (and IconTheme), so they inherit into descendant text and icons, exactly like CSS. Sizes are logical px (pass a token like FwFontSize.lg.px); leading is a line-height multiple; tracking is absolute logical px (Flutter's model — not em).

Color, size, weight

flutterwindcssTailwind
text(t.colors.foreground)text-foreground
textSize(FwFontSize.lg.px)text-lg
weight(600)font-semibold (CSS 100…900)
leading(1.5)leading-relaxed
tracking(-0.4)tracking-tight (logical px)
align(TextAlign.center)text-center (start/end RTL-aware)

Family

flutterwindcssTailwind
font('Inter')font-[Inter] (literal family)
fontSans fontSerif fontMonofont-sans font-serif font-mono (getters)

fontSans / fontSerif / fontMono resolve to the active theme's families (and FwTheme applies the theme's sans as the default), so a pasted theme's fonts apply once you register them — see Fonts. font('Inter') sets a literal family for one chain.

Style & decoration

flutterwindcssTailwind
italic notItalicitalic not-italic (getters)
underline lineThrough overlineunderline line-through overline (getters; combine)
textShadow([Shadow(...)])text-shadow-* (v4)

Clamping & wrapping

flutterwindcssTailwind
lineClamp(3)line-clamp-3 (clamps + ellipsizes)
maxLines(3)cap lines, no forced ellipsis
truncatetruncate (one line + ellipsis, getter)
overflow(TextOverflow.fade)text-ellipsis / text-clip / fade
nowrap wrapwhitespace-nowrap whitespace-normal (getters)
final t = context.fw;
const Text('A long description that should clamp to two lines…')
    .tw
    .textSize(FwFontSize.sm.px)
    .text(t.colors.mutedForeground)
    .leading(1.4)
    .lineClamp(2);

Next

On this page