About #

Do you like using Tailwind CSS to style your apps? This helps you do that in Flutter. FlutterWind is not a component library, it's a styling library. If you're looking for component libraries that support FlutterWind, see below.

FlutterWind makes sure you're using the best style engine for any given platform (e.g. CSS StyleSheet or StyleSheet.create). Its goals are to to provide a consistent styling experience across all platforms, improving developer UX, component performance, and code maintainability.

FlutterWind processes your styles during your application's build step and uses a minimal runtime to selectively apply reactive styles (eg changes to device orientation, light dark mode).

Installation #

If you have an existing project, use these guides to configure FlutterWind for your respective stack.

Features #

• Works on all Flutter platforms, uses the best style system for each platform.
• Uses the Tailwind CSS compiler
• Styles are computed at build time
• Small runtime keeps your components fast
• Respects all tailwind.config.yaml settings, including themes, custom values, and plugins
• Support for
  • Custom CSS properties, aka CSS Variables
  • Dark mode, arbitrary classes, and media queries
  • Animations and transitions
  • Container queries
    • container-type and style-based container queries are not supported
  • Pseudo classes - hover / focus / active on compatible components
  • rem units
  • Theme functions and nested functions
  • Custom CSS
• Styling based on parent state modifiers - automatically style children based upon parent pseudo classes
  • Support for the group and group/<name> syntax
• Children styles - create simple layouts based upon parent class
• Fast and consistent style application via hot reload
• Includes changes made to tailwind.config.yaml

More details here

Contribution #

See this guide

FAQ #

What if I'm looking for a component library that uses FlutterWind? #

There are a number of different component libraries available that use FlutterWind to achieve different results. You should pick the one that best suits your needs.

FlutterWindUI #

This multi-platform library focuses on achieving native feel for each individual platform using the familiar interface of Tailwind CSS.

Documentation #

Learn more on our website.