Introduction

flutterwindcss brings Tailwind CSS's design system and styling vocabulary to Flutter. It gives you design tokens (spacing, radius, semantic colors, shadows, type) and a chainable utility API — .tw — over Flutter's primitive widgets. It's the "Tailwind layer" of the project.

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; // the active theme's tokens
    return Text(label)
        .tw
        .px(3)
        .py(1)
        .bg(t.colors.primary)
        .text(t.colors.primaryForeground)
        .rounded(t.radii.full)
        .textSize(FwFontSize.sm.px);
  }
}

The mental model

Read this once and internalize it — flutterwindcss is not a CSS engine.

• Styling is declarative. Flutter is already declarative at the widget level, but its styling is imperative — you hand-assemble the tree (Padding(child: DecoratedBox(child: …))), choosing every wrapper and its nesting order. flutterwindcss makes styling itself declarative: you declare what the box should look like (.px(4).bg(primary).rounded(8)) and the engine resolves the how — which widgets, in what order, conflict resolution (.px(2).px(4) is just px-4, last wins), and when each rule applies. (See Styling with .tw.)
• Theming works by semantic indirection — exactly like shadcn/ui. Components reference semantic tokens (primary, muted, border), never raw palette swatches. Swap the theme and everything reskins, because of that indirection. (See Semantic tokens & theming.)
• "Material-free" means no Material components or visuals. flutterwindcss never imports package:flutter/material.dart; it builds on the generic widgets layer (package:flutter/widgets.dart). You get Tailwind's look and your own design system — not Material's.
• It runs on every Flutter platform. Because it's pure widgets-layer code with no platform channels or dart:io, the same styling works on iOS, Android, web (including WASM), macOS, Windows, and Linux — and identically on the pure path or inside a MaterialApp.

Where it fits

This project ships two complementary products:

Next steps