Style #

Tailwind CSS utility classes for Flutter.

Style lets you use familiar Tailwind-like class strings to style Flutter widgets — no TextStyle, BoxDecoration, or EdgeInsets boilerplate needed.

📖 Full documentation — every utility, variant, and guide. This README is just a taste.

Usage #

Replace verbose Flutter boilerplate with clean utility classes:

Container(
  padding: EdgeInsets.all(24),
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.circular(12),
  ),
  child: Text('Hello'),
)
Style('p-6 bg-white rounded-xl', child: Text('Hello'))

A more complete example:

Style('flex flex-col gap-4 p-6 bg-white rounded-xl', children: [
  Style('text-2xl font-bold text-gray-900', child: Text('Hello')),
  Style('flex flex-row gap-2', children: [
    Style('px-4 py-2 bg-red-500 text-white rounded', child: Text('One')),
    Style('px-4 py-2 bg-green-500 text-white rounded', child: Text('Two')),
  ]),
])

Features #

A quick tour of the utility families — each has far more classes than shown here:

• Layout — absolute, inset-0, z-10, overflow-hidden, columns-2, aspect-video, object-cover, isolate
• Flexbox & grid — flex-col, items-center, justify-between, grow, order-2, grid-cols-3, col-span-2, place-items-center
• Spacing & sizing — p-6, m-2, gap-4, space-x-2, w-16, h-full, size-10, max-h-screen
• Typography — text-lg, font-bold, italic, tracking-wide, leading-relaxed, uppercase, truncate, line-clamp-2
• Colors & backgrounds — bg-blue-500, text-gray-900, bg-gradient-to-r, from-pink-500, to-violet-500, bg-clip-text
• Borders & rings — border-2, border-dashed, rounded-xl, divide-y, outline, ring-2, inset-ring
• Effects & masks — shadow-md, text-shadow-md, opacity-50, mix-blend-multiply, mask-t-from-50%
• Filters — blur-sm, brightness-75, drop-shadow-md, backdrop-blur-md
• Transforms (2D & 3D) — rotate-45, scale-110, -translate-x-4, perspective-near, backface-hidden
• Transitions & animations — transition-all, duration-300, ease-out, animate-spin, animate-pulse
• Interactivity — cursor-pointer, select-none, pointer-events-none, accent-pink-500, snap-x, scroll-smooth, scrollbar-thin
• SVG & accessibility — fill-current, stroke-sky-500, sr-only

Cross-cutting syntax works everywhere: arbitrary values (w-[200], bg-[#1da1f2]), opacity modifiers (bg-blue-500/50), negatives (-m-4), important (p-0!), CSS variables (p-(--my-padding)), and child selectors (*:, **:).

Variants #

Style(
  'bg-blue-500 hover:bg-blue-700 active:bg-blue-800 disabled:opacity-50',
  child: Text('Button'),
)

• States — hover:, active:, focus:, focus-within:, focus-visible:, disabled:
• Dark mode — dark:bg-gray-800
• Group / peer / has — group-hover:, peer-focus:, has-hover:, named groups (group/card)
• Structural — first:, last:, odd:, even:, nth-3:
• Negation & custom — not-hover:, plus your own variants via StyleVariants

Variants stack: dark:hover:bg-blue-700, sm:last:mb-0.

Responsive design #

Style(
  'text-sm md:text-base lg:text-lg',
  child: Text('Responsive text'),
)

Breakpoints sm (640px) through 2xl (1536px) plus max-* variants, container queries (@container, @md:, @[400px]), and custom breakpoints via the theme.

Credits #

• Tailwind CSS — the utility-class design system this library maps to Flutter.
• mix — taken as inspiration.

Style is an independent, unofficial project. It is not affiliated with, associated with, or endorsed by Tailwind Labs, Inc. "Tailwind CSS" is a trademark of Tailwind Labs, Inc.