mix_windsAlpha
Tailwind classes.
Native Flutter.
Write the utilities you already know and get real Flutter widgets — not a webview, not a screenshot.
flutter pub add mix_windsReal components, no CSS
Every example uses the same class string in Tailwind and Flutter. Pick one, then drag the seam to compare both renderings.
If you can write the markup, you can write the widget
The functional helpers mirror the elements they replace, so a component ports across without a translation step.
<div class="flex flex-col gap-4 rounded-3xl bg-slate-950 p-6">
<p class="text-sm text-slate-400">Northstar</p>
<h2 class="text-3xl font-bold text-white md:text-4xl">Atlas</h2>
<button
class="rounded-full bg-indigo-500 px-5 py-2 hover:bg-indigo-400"
>
<span class="text-sm font-semibold text-white">Deploy</span>
</button>
</div>div('flex flex-col gap-4 rounded-3xl bg-slate-950 p-6', [
p('text-sm text-slate-400', 'Northstar'),
h2('text-3xl font-bold text-white md:text-4xl', 'Atlas'),
button(
'rounded-full bg-indigo-500 px-5 py-2 hover:bg-indigo-400',
[span('text-sm font-semibold text-white', 'Deploy')],
onPressed: deploy,
),
])Built for Flutter, not bolted onto it
Real Flutter widgets
Classes compile to Mix stylers and render as native widgets. No webview, no HTML bridge, no runtime CSS engine.
The utilities you know
Tailwind v4 grammar: responsive prefixes, state variants, arbitrary values, gradients, and the full spacing and color scales.
Interaction states included
hover:, focus-visible:, active:, and disabled: map onto Flutter widget states, with keyboard and semantics wired up.
Tailwind's theme, generated
The default palette, radii, shadows, and type scale come from a pinned upstream Tailwind snapshot, not hand-copied values.
Nothing fails silently
A token that can't be honored is reported through onDiagnostic with a reason and a workaround, never dropped without a word.
Drops down to Mix
Reach past the class string into typed Mix stylers whenever you need something the utility grammar doesn't express.
Start with one class string.
mix_winds is an open-source alpha built on Mix. Add it to a Flutter project and style your first widget the way you already think about layout.