Wind

Tailwind CSS for Flutter. Utility-first styling that turns className strings into optimized Flutter widget trees. If you know Tailwind, you already know Wind.

Documentation · Getting started · pub.dev · Issues

Flutter's structural styling costs you a six widget pyramid for a rounded card with a hover state, and the Flutter team has acknowledged the verbosity itself. Wind is the styling layer that closes the gap: one string, one widget, the same utility names you already write on the web.

WDiv(
  className: 'p-6 mx-4 bg-white dark:bg-gray-800 rounded-xl shadow-lg',
  child: WText('Hello', className: 'text-xl font-bold'),
)

The same thing in raw Flutter (click to show)

Container(
  padding: EdgeInsets.all(24),
  margin: EdgeInsets.symmetric(horizontal: 16),
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.circular(12),
    boxShadow: [
      BoxShadow(color: Colors.black.withOpacity(0.1), blurRadius: 10, offset: Offset(0, 4)),
    ],
  ),
  child: Text('Hello', style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
)

Wind is a styling engine, not a widget catalogue. It composes with whatever component library you already use.

Install

flutter pub add fluttersdk_wind

Wrap the app once, then style everything with strings:

import 'package:flutter/material.dart';
import 'package:fluttersdk_wind/fluttersdk_wind.dart';

void main() => runApp(const App());

class App extends StatelessWidget {
  const App({super.key});

  @override
  Widget build(BuildContext context) {
    return WindTheme(
      data: WindThemeData(),
      builder: (context, controller) => MaterialApp(
        theme: controller.toThemeData(),
        home: const Home(),
      ),
    );
  }
}

class Home extends StatelessWidget {
  const Home({super.key});

  @override
  Widget build(BuildContext context) {
    return WDiv(
      className: '''
        flex flex-col gap-4 p-6
        bg-white dark:bg-gray-800
        rounded-xl shadow-lg
        md:flex-row md:gap-6
        ios:rounded-2xl
        hover:shadow-xl
      ''',
      children: [
        WText('Wind', className: 'text-xl font-bold text-gray-900 dark:text-white'),
        WButton(
          className: 'px-4 py-2 rounded-lg bg-blue-500 dark:bg-blue-600 hover:bg-blue-600',
          onTap: () {},
          child: const WText('Get started', className: 'text-white font-medium'),
        ),
      ],
    );
  }
}

That runs as written. No MouseRegion, no setState, no _isHovered boolean, no MediaQuery branch for the tablet layout.

What you get