Utility Reference

Core Flutterwind utility groups and class patterns.

Flutterwind follows a utility-first approach inspired by Tailwind CSS.
Use utility classes with .className('...') on widgets.

Syntax cheatsheet

Text('Title').className('text-xl font-bold text-slate-900')
Container().className('p-4 rounded-lg bg-blue-500')
Row(children: []).className('flex items-center justify-between')

Utility groups

Group	Examples
Layout	`flex`, `grid`, `items-center`, `justify-between`
Spacing	`m-4`, `mt-2`, `p-6`, `gap-3`
Sizing	`w-full`, `h-12`, `max-w-md`
Typography	`text-sm`, `text-xl`, `font-bold`, `text-center`
Colors	`text-blue-600`, `bg-zinc-100`, `border-zinc-300`
Border & Radius	`border`, `border-2`, `rounded`, `rounded-xl`
Effects	`shadow-sm`, `shadow-lg`, `blur-sm`, `brightness-125`
Transform	`scale-105`, `rotate-6`, `translate-x-2`
Responsive	`md:text-base`, `lg:grid-cols-3`, `xl:p-8`
States	`hover:bg-blue-700`, `focus:ring-2`

Order of writing classes

Use a predictable order to keep code readable:

Layout (flex, grid, alignment)
Spacing (p-*, m-*, gap-*)
Sizing (w-*, h-*)
Visual style (colors, borders, radius, shadow)
Typography
Responsive variants
Interaction states

Container().className(
  'flex items-center justify-between p-4 w-full rounded-lg border border-zinc-200 bg-white text-sm md:p-6 hover:shadow-md',
)

Common pitfalls

Use valid utility names from your supported Flutterwind set.
Prefer flutterwind.yaml for token customization instead of hardcoded arbitrary values everywhere.
Keep base styles mobile-first, then add sm:, md:, lg: variants.