Typography and Colors

Apply text, color, and visual styling utilities.

Typography utilities

CategoryExamples
Sizetext-xs, text-sm, text-base, text-xl, text-3xl
Weightfont-thin, font-normal, font-medium, font-bold
Aligntext-left, text-center, text-right
Transformuppercase, lowercase, capitalize
Text('Flutterwind Docs')
    .className('text-2xl font-bold text-center uppercase')

Color utilities

CategoryExamples
Text colortext-zinc-900, text-blue-600, text-red-500
Backgroundbg-white, bg-zinc-100, bg-indigo-600
Borderborder-zinc-200, border-blue-500
Container(
  padding: const EdgeInsets.all(16),
  child: const Text('Primary Card'),
).className('bg-blue-50 border border-blue-200 rounded-lg text-blue-900')

Dark-friendly styling pattern

When supporting themes, keep clear contrast and avoid relying on a single token only.

Container().className(
  'bg-white text-zinc-900 border border-zinc-200 rounded-xl shadow-sm',
)

Readability tips

  • Prefer text-base for default body text
  • Use text-sm for metadata and labels
  • Reserve text-xl+ sizes for section headings
  • Pair strong text colors with softer background/border tokens
Edit this page
Layout and Spacing
Build responsive structure using Flutterwind layout utilities.
Effects and Transforms
Add depth and motion with Flutterwind visual utilities.