mix_tailwindsAlpha
Tailwind classes.
Native Flutter.
Write the utilities you already know and get real Flutter widgets — not a webview, not a screenshot. Same class string, same result, on both sides of the seam below.
flutter pub add mix_tailwinds
Drag the seam. The left half is a browser on Tailwind 4.3.1; the right half is Flutter.
Real components, no CSS
Every one of these is a Flutter widget tree described entirely in Tailwind utilities. Pick one to see it, and the exact string that produced it.
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_tailwinds 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.