# Wind

**Rapidly build modern Flutter apps without ever leaving your widget tree.**

Tailwind CSS for Flutter. A utility-first styling framework packed with classes like `flex`, `p-4`, `dark:bg-gray-800`, `hover:scale-105`, and `md:flex-row` that compose into responsive, theme-aware widget trees.

## Style. Compose. Ship.

Stop nesting widgets for styling. Write `className="p-4 bg-blue-500 hover:bg-blue-700"` directly in your Dart code. Same Tailwind syntax you write on the web.

### Utility-First Styling

Style widgets with composable classes like `p-4 bg-blue-500 rounded-lg`. No more deeply nested widget trees just for styling.

[Learn more about Utility-First Styling](https://anilcancakir.com/wind_kit/docs/core-concepts/utility-first.md)

### Responsive Design

Mobile-first breakpoint system. Prefix any utility with `sm:`, `md:` or `lg:` to apply styles at specific screen sizes.

[Learn more about Responsive Design](https://anilcancakir.com/wind_kit/docs/core-concepts/responsive-design.md)

### Interactive States

Add `hover:bg-blue-700` or `disabled:opacity-50` to any element. Built-in hover, focus, loading, and custom state support.

[Learn more about Interactive States](https://anilcancakir.com/wind_kit/docs/core-concepts/state-management.md)

### Theming

Define your entire design system in `WindThemeData`: custom colors, typography scales, spacing tokens, and shadows. One config, consistent UI everywhere.

[Learn more about Theming](https://anilcancakir.com/wind_kit/docs/core-concepts/theming.md)

### Dark Mode

Prefix any utility with `dark:` for automatic dark mode support. Use `dark:bg-slate-900` and toggle themes at runtime with a single call.

[Learn more about Dark Mode](https://anilcancakir.com/wind_kit/docs/core-concepts/dark-mode.md)

### Dynamic Rendering

Build Flutter UIs from JSON at runtime with `WDynamic`. Server-driven UI for CMS layouts, A/B testing, and remote configuration. No app rebuild needed.

[Learn more about Dynamic Rendering](https://anilcancakir.com/wind_kit/docs/core-concepts/dynamic-rendering.md)

## Live Playground

Write Wind code and see the results instantly. Experiment with utility classes, test your ideas, and copy the code directly to your Flutter project.

- Real-time preview as you type
- One-click copy to clipboard
- Full utility class support

## Your agent speaks Wind.

The Wind UI skill teaches your coding assistant the className grammar, dark-mode pairing rules, and anti-patterns before the first line. One command wires it up.

```bash
npx skills add anilcancakir/ai --skill wind-ui
```

[other editors](https://github.com/anilcancakir/ai)

## And verifies what it wrote.

Skills teach the grammar. The MCP server at `mcp.anilcancakir.com/wind` gives your agent live docs lookup while it edits, so it never ships a hallucinated className.

```bash
claude mcp add --transport http wind_kit https://mcp.anilcancakir.com/wind
```

```bash
npx @anilcancakir/wind-mcp
```

## Start building in seconds

```bash
flutter pub add wind_kit
```

Or add to `pubspec.yaml`:

```yaml
dependencies:
  wind_kit: ^1.12.0
```

Or give your AI agent this prompt:

```text
Read https://anilcancakir.com/wind_kit/docs/llms.txt and install the Wind package in this project.
```

## Docs

### Getting Started

- [Installation](https://anilcancakir.com/wind_kit/docs/getting-started/installation.md)
- [Upgrade Guide](https://anilcancakir.com/wind_kit/docs/getting-started/upgrade-guide.md)

### Core Concepts

- [Utility-First Fundamentals](https://anilcancakir.com/wind_kit/docs/core-concepts/utility-first.md)
- [Responsive Design](https://anilcancakir.com/wind_kit/docs/core-concepts/responsive-design.md)
- [Dark Mode](https://anilcancakir.com/wind_kit/docs/core-concepts/dark-mode.md)
- [State Management & Interactive Styles](https://anilcancakir.com/wind_kit/docs/core-concepts/state-management.md)
- [Theme Configuration](https://anilcancakir.com/wind_kit/docs/core-concepts/theming.md)
- [Theme Binding](https://anilcancakir.com/wind_kit/docs/core-concepts/theme-binding.md)
- [Dynamic Rendering](https://anilcancakir.com/wind_kit/docs/core-concepts/dynamic-rendering.md)
- [Debugging](https://anilcancakir.com/wind_kit/docs/core-concepts/debugging.md)

### Layout

- [Display](https://anilcancakir.com/wind_kit/docs/layout/display.md)
- [Flexbox & Layout](https://anilcancakir.com/wind_kit/docs/layout/flexbox.md)
- [Grid Template Columns](https://anilcancakir.com/wind_kit/docs/layout/grid.md)
- [Sizing](https://anilcancakir.com/wind_kit/docs/layout/sizing.md)
- [Spacing](https://anilcancakir.com/wind_kit/docs/layout/spacing.md)
- [Positioning](https://anilcancakir.com/wind_kit/docs/layout/positioning.md)
- [Z-Index](https://anilcancakir.com/wind_kit/docs/layout/z-index.md)
- [Overflow](https://anilcancakir.com/wind_kit/docs/layout/overflow.md)
- [Aspect Ratio](https://anilcancakir.com/wind_kit/docs/layout/aspect-ratio.md)

### Typography

- [Font Family](https://anilcancakir.com/wind_kit/docs/typography/font-family.md)
- [Font Size](https://anilcancakir.com/wind_kit/docs/typography/font-size.md)
- [Font Weight](https://anilcancakir.com/wind_kit/docs/typography/font-weight.md)
- [Line Height](https://anilcancakir.com/wind_kit/docs/typography/line-height.md)
- [Letter Spacing](https://anilcancakir.com/wind_kit/docs/typography/letter-spacing.md)
- [Text Align](https://anilcancakir.com/wind_kit/docs/typography/text-align.md)
- [Text Color](https://anilcancakir.com/wind_kit/docs/typography/text-color.md)
- [Text Decoration](https://anilcancakir.com/wind_kit/docs/typography/text-decoration.md)
- [Text Overflow](https://anilcancakir.com/wind_kit/docs/typography/text-overflow.md)
- [Text Transform](https://anilcancakir.com/wind_kit/docs/typography/text-transform.md)

### Borders

- [Border Width, Color, & Radius](https://anilcancakir.com/wind_kit/docs/borders/borders.md)
- [Ring Width, Color, and Offset](https://anilcancakir.com/wind_kit/docs/borders/ring.md)

### Styling

- [Background Color](https://anilcancakir.com/wind_kit/docs/styling/background-color.md)
- [Background Gradient](https://anilcancakir.com/wind_kit/docs/styling/background-gradient.md)
- [Background Image](https://anilcancakir.com/wind_kit/docs/styling/background-image.md)
- [Opacity](https://anilcancakir.com/wind_kit/docs/styling/opacity.md)
- [Shadow](https://anilcancakir.com/wind_kit/docs/styling/shadow.md)
- [WindRecipe](https://anilcancakir.com/wind_kit/docs/styling/wind-recipe.md)

### Interactivity

- [Animation](https://anilcancakir.com/wind_kit/docs/interactivity/animation.md)
- [Transitions](https://anilcancakir.com/wind_kit/docs/interactivity/transition.md)
- [Cursor](https://anilcancakir.com/wind_kit/docs/interactivity/cursor.md)

### Widgets

- [WDiv](https://anilcancakir.com/wind_kit/docs/widgets/w-div.md)
- [WText](https://anilcancakir.com/wind_kit/docs/widgets/w-text.md)
- [WButton](https://anilcancakir.com/wind_kit/docs/widgets/w-button.md)
- [WIcon](https://anilcancakir.com/wind_kit/docs/widgets/w-icon.md)
- [WImage](https://anilcancakir.com/wind_kit/docs/widgets/w-image.md)
- [WSvg](https://anilcancakir.com/wind_kit/docs/widgets/w-svg.md)
- [WInput](https://anilcancakir.com/wind_kit/docs/widgets/w-input.md)
- [WFormInput](https://anilcancakir.com/wind_kit/docs/widgets/w-form-input.md)
- [WSelect](https://anilcancakir.com/wind_kit/docs/widgets/w-select.md)
- [WFormSelect](https://anilcancakir.com/wind_kit/docs/widgets/w-form-select.md)
- [WCheckbox](https://anilcancakir.com/wind_kit/docs/widgets/w-checkbox.md)
- [WFormCheckbox](https://anilcancakir.com/wind_kit/docs/widgets/w-form-checkbox.md)
- [WRadio](https://anilcancakir.com/wind_kit/docs/widgets/w-radio.md)
- [WSwitch](https://anilcancakir.com/wind_kit/docs/widgets/w-switch.md)
- [WDatePicker](https://anilcancakir.com/wind_kit/docs/widgets/w-date-picker.md)
- [WFormDatePicker](https://anilcancakir.com/wind_kit/docs/widgets/w-form-date-picker.md)
- [WPopover](https://anilcancakir.com/wind_kit/docs/widgets/w-popover.md)
- [WTabs](https://anilcancakir.com/wind_kit/docs/widgets/w-tabs.md)
- [WCard](https://anilcancakir.com/wind_kit/docs/widgets/w-card.md)
- [WBadge](https://anilcancakir.com/wind_kit/docs/widgets/w-badge.md)
- [WAnchor](https://anilcancakir.com/wind_kit/docs/widgets/w-anchor.md)
- [WSpacer](https://anilcancakir.com/wind_kit/docs/widgets/w-spacer.md)
- [WBreakpoint](https://anilcancakir.com/wind_kit/docs/widgets/w-breakpoint.md)
- [WDynamic](https://anilcancakir.com/wind_kit/docs/widgets/w-dynamic.md)
- [WKeyboardActions](https://anilcancakir.com/wind_kit/docs/widgets/w-keyboard-actions.md)
- [WindAnimationWrapper](https://anilcancakir.com/wind_kit/docs/widgets/wind-animation-wrapper.md)

### Utilities

- [Style Parser](https://anilcancakir.com/wind_kit/docs/utilities/style-parser.md)
- [Color Helpers](https://anilcancakir.com/wind_kit/docs/utilities/color-helpers.md)
- [Context Extensions](https://anilcancakir.com/wind_kit/docs/utilities/context-extensions.md)
- [Responsive Helpers](https://anilcancakir.com/wind_kit/docs/utilities/responsive-helpers.md)
- [Spacing Helpers](https://anilcancakir.com/wind_kit/docs/utilities/spacing-helpers.md)
- [Typography Helpers](https://anilcancakir.com/wind_kit/docs/utilities/typography-helpers.md)