Coverage — Tailwind & shadcn

flutterwindcss re-creates Tailwind's styling vocabulary and shadcn's token system on Flutter's widgets layer. It deliberately doesn't clone every utility — it builds the things that matter and aren't a hard add, delegates a few to existing solutions, and is honest about the tiny set Flutter genuinely can't express. Here's exactly where it stands.

vs Tailwind CSS

~96% of daily-driver Tailwind v4 utilities are built — verified against the full v4 catalog. Two properties make effective coverage even higher: arbitrary values are native (Tailwind needs w-[37px]; here you just write .w(37)), and bgGradient/shadow are pass-through (any Gradient or List<BoxShadow> works, so radial/conic gradients and arbitrary shadows already do).

✅ Built — everything you reach for daily

🟡 Not built yet — feasible, by demand

Each has a known Flutter mechanism and is scheduled when a real need appears — none is a daily-driver and none is a wall: inset-shadow/inset-ring, mask-*, backdrop color filters, columns, negative margins, scroll-margin/scroll-padding/overscroll-behavior, scroll-snap-stop/-type, scrollbar-gutter, order, bg-clip-text (gradient text), background-blend-mode, bg-repeat-space/-round, the drop-shadow filter, sticky, position: fixed, font-stretch, border-double, text-indent, vertical-align, word-break, and the 3D-transform completion set (backface-visibility, perspective-origin, transform-style/preserve-3d, scale-z). The full item-by-item enumeration (with Flutter mechanisms) lives in the engine's coverage & roadmap spec.

Shipped in 1.0.3: theme-resolved font-sans/-serif/-mono (+ FwTheme applies the theme font), overline, object-position (fit(..., alignment:)), and the scrollbar trackColor.

↪️ Delegated by design

Not the engine's job:

🚫 Genuinely impossible in Flutter

No faithful analog exists (a small, honest set): the true CSS cascade (and the open-ended child/descendant selectors */**/[&:…]), pseudo-elements ::before/::after + content (and placeholder/marker/selection/first-line…), float/clear, touch-action, text-wrap: balance/pretty, auto hyphenation, bg-attachment: fixed, font-smoothing, underline-offset, print, and text-transform as a render-time style.

Variants

The variant system mirrors Tailwind's: you declare when a rule applies and the engine resolves it lazily. The daily-driver variants are first-class:

For states your component owns — checked, required, open, valid, a custom toggle — use whenState(WidgetState.…, …): it's the faithful path for any injected boolean state. Structural index variants (first/last/odd/nth) resolve at the list-building site, where you own child order.

By demand (feasible, not yet built): focus-within/focus-visible, has-*/not-*/in-*, aria-*/data-*/supports-* (bridged to whenState), and the media variants motion-safe/-reduce, portrait/landscape, contrast-more/-less (a MediaQuery-backed resolver condition).

By design, dark is theme-level, not a per-utility dark: variant — a whole-theme swap (FwAnimatedTheme + dark tokens) reskins everything from one switch, which is the semantic-token model's whole point.

vs shadcn/ui

shadcn is three layers. Here's where each lands in this project:

Next steps