flutterwindcss

Tailwind CSS v4's design system and styling vocabulary, for Flutter.

📖 Documentation · 🎨 Theme generator · 📦 pub.flutter-io.cn

flutterwindcss gives you Tailwind's design tokens (spacing, radius, semantic colors, shadows, type) and a chainable, typed utility API — .tw — over Flutter's primitive widgets. It's Material-free (it never imports package:flutter/material.dart) and themes by semantic indirection, exactly like shadcn/ui: components reference roles (primary, muted, border), and swapping the theme reskins everything.

import 'package:flutter/widgets.dart';
import 'package:flutterwindcss/flutterwindcss.dart';

class Badge extends StatelessWidget {
  const Badge(this.label, {super.key});
  final String label;

  @override
  Widget build(BuildContext context) {
    final t = context.fw;
    return Text(label)
        .tw
        .px(3)
        .py(1)
        .bg(t.colors.primary)
        .text(t.colors.primaryForeground)
        .rounded(t.radii.full)
        .textSize(FwFontSize.sm.px);
  }
}

Install

flutter pub add flutterwindcss

Provide a theme

Wrap your app once; read tokens via context.fw. Works on a bare WidgetsApp (pure path) or inside a MaterialApp:

// Pure path
FwTheme(tokens: FwTokens.light, child: const HomeScreen());

// Material interop
MaterialApp(
  theme: ThemeData(extensions: const [FwThemeExtension(tokens: FwTokens.light)]),
  home: const HomeScreen(),
);

Use FwAnimatedTheme instead of FwTheme to crossfade on theme/brightness changes.

Theme portability

Paste any tweakcn/shadcn theme into the web theme generator at flutterbits.vercel.app/theme-generator and copy a ready-to-use theme.dart (two const FwTokens) — colors, radius, shadows and fonts, nothing dropped.

Documentation

📖 Full docs: flutterbits.vercel.app/docs/flutterwindcss — installation, the .tw utility reference, theming, layout, breakpoints, and the theme generator.

• API reference — the full dartdoc for every public type is on the pub.flutter-io.cn package page.
• A runnable example is in example/ (and a larger showcase in apps/example).
• Building with an AI agent? SKILLS.md is a compact guide (rules, patterns, gotchas) that helps coding agents use the .tw API and tokens correctly.

License

MIT © Sipho Nkebe