# Wind documentation > Wind brings Tailwind utility classes to Flutter: one className string becomes an optimised widget tree, with responsive, dark: and state variants built in. ## Getting Started - [Installation](https://anilcancakir.com/wind_kit/docs/v1.6/getting-started/installation.md): Getting started with Wind requires a few configuration steps to ensure utility classes resolve correctly across your application. - [Upgrade Guide](https://anilcancakir.com/wind_kit/docs/v1.6/getting-started/upgrade-guide.md): Wind follows Semantic Versioning 2.0.0. Within a major version, upgrades are backward compatible: a project pinned to ^1.0.0 resolves to the latest 1.x… ## Core Concepts - [Utility-First Fundamentals](https://anilcancakir.com/wind_kit/docs/v1.6/core-concepts/utility-first.md): Utility-first styling is the core philosophy of Wind. Instead of building complex, nested widget trees for every design detail, you apply pre-defined utility… - [Responsive Design](https://anilcancakir.com/wind_kit/docs/v1.6/core-concepts/responsive-design.md): Building interfaces that adapt to any screen size is a core requirement for modern applications. Wind makes this process declarative using a mobile-first… - [Dark Mode](https://anilcancakir.com/wind_kit/docs/v1.6/core-concepts/dark-mode.md): Wind makes it incredibly easy to support dark mode using the dark: variant modifier. Instead of managing complex theme objects or multiple style sheets, you… - [State Management & Interactive Styles](https://anilcancakir.com/wind_kit/docs/v1.6/core-concepts/state-management.md): Interactive styles allow you to define how your UI reacts to user input without managing complex state variables. Instead of nesting multiple MouseRegion… - [Theme Configuration](https://anilcancakir.com/wind_kit/docs/v1.6/core-concepts/theming.md): Wind is designed to be fully customizable from the ground up. If you've ever used Tailwind CSS, you'll feel right at home with how we handle "design tokens."… - [Theme Binding](https://anilcancakir.com/wind_kit/docs/v1.6/core-concepts/theme-binding.md): Theme binding allows you to sync your Wind configuration with Flutter's native ThemeData system. This ensures that standard Material widgets automatically… - [Dynamic Rendering](https://anilcancakir.com/wind_kit/docs/v1.6/core-concepts/dynamic-rendering.md): Build Flutter UIs from JSON at runtime. WDynamic turns a Map structure into a live widget tree with action handling and form state management. - [Debugging](https://anilcancakir.com/wind_kit/docs/v1.6/core-concepts/debugging.md): Wind includes a specialized debugging system designed to peel back the abstraction of the utility-first engine. Since Wind translates a single className string… ## Layout - [Display](https://anilcancakir.com/wind_kit/docs/v1.6/layout/display.md): Utilities for controlling the layout mode of an element. - [Flexbox & Layout](https://anilcancakir.com/wind_kit/docs/v1.6/layout/flexbox.md): Utilities for controlling flex containers, direction, alignment, wrapping, and spacing. - [Grid Template Columns](https://anilcancakir.com/wind_kit/docs/v1.6/layout/grid.md): Utilities for specifying the columns in a grid layout. - [Sizing](https://anilcancakir.com/wind_kit/docs/v1.6/layout/sizing.md): Utilities for setting the width and height of elements. - [Spacing](https://anilcancakir.com/wind_kit/docs/v1.6/layout/spacing.md): Utilities for controlling the padding and margin of elements. - [Positioning](https://anilcancakir.com/wind_kit/docs/v1.6/layout/positioning.md): Utilities for controlling how elements are positioned in the layout using relative and absolute placement. - [Z-Index](https://anilcancakir.com/wind_kit/docs/v1.6/layout/z-index.md): Utilities for controlling the stack order of an element. - [Overflow](https://anilcancakir.com/wind_kit/docs/v1.6/layout/overflow.md): Utilities for controlling how an element handles content that is too large for the container. - [Aspect Ratio](https://anilcancakir.com/wind_kit/docs/v1.6/layout/aspect-ratio.md): Utilities for controlling the aspect ratio of an element. ## Typography - [Font Family](https://anilcancakir.com/wind_kit/docs/v1.6/typography/font-family.md): Utilities for controlling the typeface of text. - [Font Size](https://anilcancakir.com/wind_kit/docs/v1.6/typography/font-size.md): Utilities for controlling the font size of an element. - [Font Weight](https://anilcancakir.com/wind_kit/docs/v1.6/typography/font-weight.md): Utilities for controlling the font weight of an element. - [Line Height](https://anilcancakir.com/wind_kit/docs/v1.6/typography/line-height.md): Utilities for controlling the leading (line height) of an element. - [Letter Spacing](https://anilcancakir.com/wind_kit/docs/v1.6/typography/letter-spacing.md): Utilities for controlling the tracking (letter spacing) of an element. - [Text Align](https://anilcancakir.com/wind_kit/docs/v1.6/typography/text-align.md): Utilities for controlling the alignment of text. - [Text Color](https://anilcancakir.com/wind_kit/docs/v1.6/typography/text-color.md): Utilities for controlling the text color of an element. - [Text Decoration](https://anilcancakir.com/wind_kit/docs/v1.6/typography/text-decoration.md): Utilities for controlling the decoration of text. - [Text Overflow](https://anilcancakir.com/wind_kit/docs/v1.6/typography/text-overflow.md): Utilities for controlling how text behaves when it overflows its container. - [Text Transform](https://anilcancakir.com/wind_kit/docs/v1.6/typography/text-transform.md): Utilities for controlling the capitalization and wrapping of text. ## Borders - [Border Width, Color, & Radius](https://anilcancakir.com/wind_kit/docs/v1.6/borders/borders.md): Utilities for controlling border width, color, style, and border radius. - [Ring Width, Color, and Offset](https://anilcancakir.com/wind_kit/docs/v1.6/borders/ring.md): Utilities for creating outline rings with box-shadows. These are useful for focus states or highlighting elements without affecting layout. ## Styling - [Background Color](https://anilcancakir.com/wind_kit/docs/v1.6/styling/background-color.md): Utilities for controlling an element's background color. - [Background Gradient](https://anilcancakir.com/wind_kit/docs/v1.6/styling/background-gradient.md): Utilities for creating linear gradients with customizable directions and color stops. - [Background Image](https://anilcancakir.com/wind_kit/docs/v1.6/styling/background-image.md): Utilities for controlling background images, sizing, positioning, and repeat behavior. - [Opacity](https://anilcancakir.com/wind_kit/docs/v1.6/styling/opacity.md): Utilities for controlling the opacity of an element. - [Shadow](https://anilcancakir.com/wind_kit/docs/v1.6/styling/shadow.md): Utilities for controlling the box shadow of an element. - [WindRecipe](https://anilcancakir.com/wind_kit/docs/v1.6/styling/wind-recipe.md): A tv() (tailwind-variants) equivalent for Wind. Composes a className from a base, a set of variants (one axis per key, each mapping a value to a className)… ## Interactivity - [Animation](https://anilcancakir.com/wind_kit/docs/v1.6/interactivity/animation.md): Utilities for animating elements with CSS-like animation classes. Whether you're building a loading state or adding some life to your UI, Wind's animation… - [Transitions](https://anilcancakir.com/wind_kit/docs/v1.6/interactivity/transition.md): Utilities for controlling the duration and easing of state transitions in Wind. - [Cursor](https://anilcancakir.com/wind_kit/docs/v1.6/interactivity/cursor.md): Utilities for controlling the mouse cursor shown when the pointer is over an element on web and desktop targets. ## Widgets - [WDiv](https://anilcancakir.com/wind_kit/docs/v1.6/widgets/w-div.md): The fundamental building block of Wind. WDiv acts as a multi-purpose container that replaces standard Flutter widgets like Container, Row, Column, Flex, Grid… - [WText](https://anilcancakir.com/wind_kit/docs/v1.6/widgets/w-text.md): A utility-first text component that translates Tailwind-like class strings into optimized Flutter typography. - [WButton](https://anilcancakir.com/wind_kit/docs/v1.6/widgets/w-button.md): WButton is an interactive component that combines WAnchor state management with Tailwind-like utility styling and built-in loading states. - [WIcon](https://anilcancakir.com/wind_kit/docs/v1.6/widgets/w-icon.md): The utility-first icon component for displaying vector icons with Tailwind-like styling. It wraps Flutter's Icon widget and applies utility classes for sizing… - [WImage](https://anilcancakir.com/wind_kit/docs/v1.6/widgets/w-image.md): The WImage widget brings utility-first styling to images in Flutter, providing HTML-like semantics with Tailwind-inspired classes for sizing, object fitting… - [WSvg](https://anilcancakir.com/wind_kit/docs/v1.6/widgets/w-svg.md): The utility-first SVG component. WSvg brings HTML SVG semantics to Flutter with Tailwind-like utility classes for styling, supporting both asset paths and raw… - [WInput](https://anilcancakir.com/wind_kit/docs/v1.6/widgets/w-input.md): A utility-first form input that combines React-style controlled state management with Tailwind-like styling. It renders Material-free (EditableText core inside… - [WFormInput](https://anilcancakir.com/wind_kit/docs/v1.6/widgets/w-form-input.md): A Wind-styled input that integrates seamlessly with Flutter's native Form validation system. It extends FormField to provide automatic error handling, label… - [WSelect](https://anilcancakir.com/wind_kit/docs/v1.6/widgets/w-select.md): A highly customizable, utility-first select component that supports single selection, multi-selection, searching, and remote data fetching. - [WFormSelect](https://anilcancakir.com/wind_kit/docs/v1.6/widgets/w-form-select.md): A Wind-styled single or multi-select dropdown that integrates seamlessly with Flutter's Form validation. It wraps the core WSelect widget with FormField logic… - [WCheckbox](https://anilcancakir.com/wind_kit/docs/v1.6/widgets/w-checkbox.md): A utility-first checkbox component that translates Tailwind-style classes into a fully customizable checkbox widget. It sidesteps the limitations of native… - [WFormCheckbox](https://anilcancakir.com/wind_kit/docs/v1.6/widgets/w-form-checkbox.md): A Wind-styled checkbox that integrates with Flutter's Form validation, providing built-in support for labels, hints, and error states. - [WRadio](https://anilcancakir.com/wind_kit/docs/v1.6/widgets/w-radio.md): Controlled radio button. Composes WAnchor (interaction state) + WDiv (outer ring shell) + WDiv (inner filled indicator). Drives the selected: state prefix when… - [WSwitch](https://anilcancakir.com/wind_kit/docs/v1.6/widgets/w-switch.md): Controlled toggle switch. Composes WAnchor + WDiv (track) + WDiv (thumb). Pushes the checked: state prefix into the className context when value is true, so… - [WDatePicker](https://anilcancakir.com/wind_kit/docs/v1.6/widgets/w-date-picker.md): A utility-first date picker component built on WPopover with support for single date selection, date range selection, date-with-time selection, min/max… - [WFormDatePicker](https://anilcancakir.com/wind_kit/docs/v1.6/widgets/w-form-date-picker.md): A form-integrated date picker that wraps WDatePicker with Flutter's FormField. Provides native form validation, automatic error: state styling, and… - [WPopover](https://anilcancakir.com/wind_kit/docs/v1.6/widgets/w-popover.md): A flexible popover component for creating dropdown menus, notification panels, user menus, tooltips, and similar overlay patterns. - [WTabs](https://anilcancakir.com/wind_kit/docs/v1.6/widgets/w-tabs.md): Controlled tabs widget. Renders a tab list and a content panel. The selected: state prefix activates on the currently active tab, so callers can supply tokens… - [WCard](https://anilcancakir.com/wind_kit/docs/v1.6/widgets/w-card.md): Surface container with optional header and footer slots. Composes a WDiv (flex-col) with up to three slots: an optional header above the body, the required… - [WBadge](https://anilcancakir.com/wind_kit/docs/v1.6/widgets/w-badge.md): Inline status or label pill. Composes a pill-shaped WDiv (rounded-full, inline-flex) around a WText (text-xs). All visual styling is className-driven: the… - [WAnchor](https://anilcancakir.com/wind_kit/docs/v1.6/widgets/w-anchor.md): The foundational state wrapper that detects user gestures (Hover, Focus, Press) and propagates that state down to all descendant widgets via… - [WSpacer](https://anilcancakir.com/wind_kit/docs/v1.6/widgets/w-spacer.md): The WSpacer is a lightweight widget designed specifically for adding consistent gaps between elements. Unlike WDiv, which supports a full range of decorations… - [WBreakpoint](https://anilcancakir.com/wind_kit/docs/v1.6/widgets/w-breakpoint.md): Declarative breakpoint-keyed builder for rendering different widget trees per responsive breakpoint. An escape hatch for cases where the widget structure… - [WDynamic](https://anilcancakir.com/wind_kit/docs/v1.6/widgets/w-dynamic.md): WDynamic renders a Flutter widget tree from a JSON/Map configuration at runtime, with built-in action handling and form state management. - [WKeyboardActions](https://anilcancakir.com/wind_kit/docs/v1.6/widgets/w-keyboard-actions.md): A wrapper that renders a Done button and field-navigation toolbar above the keyboard for any group of input fields, with optional platform targeting and custom… - [WindAnimationWrapper](https://anilcancakir.com/wind_kit/docs/v1.6/widgets/wind-animation-wrapper.md): WindAnimationWrapper wraps any widget in a looping animation driven by WindAnimationType: spin, ping, pulse, or bounce. It is the underlying engine behind… ## Utilities - [Style Parser](https://anilcancakir.com/wind_kit/docs/v1.6/utilities/style-parser.md): While Wind widgets like WDiv and WText are the primary way to use utility classes, you may sometimes need to parse utility strings programmatically. The Style… - [Color Helpers](https://anilcancakir.com/wind_kit/docs/v1.6/utilities/color-helpers.md): Wind provides a set of utility functions and extensions to help you resolve and manipulate colors programmatically, staying consistent with your theme. - [Context Extensions](https://anilcancakir.com/wind_kit/docs/v1.6/utilities/context-extensions.md): Wind provides a set of ergonomic extensions on BuildContext to make accessing theme data, responsive breakpoints, and styling helpers as concise as possible… - [Responsive Helpers](https://anilcancakir.com/wind_kit/docs/v1.6/utilities/responsive-helpers.md): Responsive helpers provide programmatic access to Wind's breakpoint system, platform detection, and screen metrics directly from your Dart code. - [Spacing Helpers](https://anilcancakir.com/wind_kit/docs/v1.6/utilities/spacing-helpers.md): Wind provides programmatic access to your theme's spacing scale through helper functions and extensions. This allows you to maintain consistency when building… - [Typography Helpers](https://anilcancakir.com/wind_kit/docs/v1.6/utilities/typography-helpers.md): Wind provides a set of helper functions and extensions to access typography values directly from your Dart code. While utility classes are the primary way to… ## Optional - [Wind](https://anilcancakir.com/wind_kit): the package landing page - [Full documentation](https://anilcancakir.com/wind_kit/docs/v1.6/llms-full.txt): every page in one file