# 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

- [Get Started with Wind](https://anilcancakir.com/wind_kit/docs/v0.0/getting-started/installation.md): Wind enables seamless styling in Flutter by interpreting class names directly in your widget trees, transforming them into optimized designs.
- [Binding the Flutter Theme](https://anilcancakir.com/wind_kit/docs/v0.0/getting-started/binding-the-flutter-theme.md): Bind the Wind theme to your MaterialApp so your app's Material defaults and Wind's utility-first styles stay consistent.

## Layout

- [Display (Visibility)](https://anilcancakir.com/wind_kit/docs/v0.0/layout/display.md): Control widget visibility with hide and show utility classes, with optional responsive breakpoint prefixes.
- [Overflow](https://anilcancakir.com/wind_kit/docs/v0.0/layout/overflow.md): Make content scrollable when it exceeds the available space using the overflow-scroll utility class.

## Typography

- [Font Size](https://anilcancakir.com/wind_kit/docs/v0.0/typography/font-size.md): Control text size with predefined named scales or arbitrary pixel values. Font sizes can also be customized in the theme for maximum flexibility.
- [Font Weight](https://anilcancakir.com/wind_kit/docs/v0.0/typography/font-weight.md): Control the thickness of text using predefined weight names. Font weights can also be customized in the theme.
- [Line Height](https://anilcancakir.com/wind_kit/docs/v0.0/typography/line-height.md): Control the vertical spacing between lines of text. Line heights can also be customized in the theme.
- [Letter Spacing](https://anilcancakir.com/wind_kit/docs/v0.0/typography/letter-spacing.md): Adjust the spacing between characters using predefined named scales or arbitrary pixel values. Letter spacings can also be customized in the theme.
- [Text Alignment](https://anilcancakir.com/wind_kit/docs/v0.0/typography/text-align.md): Control the horizontal alignment of text content using predefined alignment classes.
- [Text Color](https://anilcancakir.com/wind_kit/docs/v0.0/typography/text-color.md): Apply color to text using predefined palette classes or arbitrary hex values.
- [Text Decoration](https://anilcancakir.com/wind_kit/docs/v0.0/typography/text-decoration.md): Apply underline, overline, or strikethrough decorations to text, or remove an inherited decoration.
- [Text Transform](https://anilcancakir.com/wind_kit/docs/v0.0/typography/text-transform.md): Change the capitalization of text content at render time without modifying the source string.
- [Font Style](https://anilcancakir.com/wind_kit/docs/v0.0/typography/font-style.md): Toggle between italic and normal text style using simple class names.

## Borders

- [Border Color](https://anilcancakir.com/wind_kit/docs/v0.0/borders/border-color.md): Apply colors to widget borders using predefined theme colors or arbitrary hex values.
- [Border Radius](https://anilcancakir.com/wind_kit/docs/v0.0/borders/border-radius.md): Round widget corners with predefined size keys or arbitrary pixel values.
- [Border Width](https://anilcancakir.com/wind_kit/docs/v0.0/borders/border-width.md): Control the thickness of widget borders. The width value maps directly to pixels.

## Widgets

- [WCard](https://anilcancakir.com/wind_kit/docs/v0.0/widgets/wcard.md): A utility-first card widget that wraps Flutter's Card, adding elevation, shadow, border, and padding through Wind className utilities.
- [WContainer](https://anilcancakir.com/wind_kit/docs/v0.0/widgets/wcontainer.md): A utility-first container widget that wraps Flutter's Container, styled directly with Wind className utilities.
- [WFlex](https://anilcancakir.com/wind_kit/docs/v0.0/widgets/wflex.md): A utility-first flex layout widget that wraps Flutter's Flex, controlling direction, alignment, spacing, and overflow through className utilities.
- [WFlexContainer](https://anilcancakir.com/wind_kit/docs/v0.0/widgets/wflexcontainer.md): A utility-first widget that combines a styled WContainer with a WFlex layout, letting you decorate a box and lay out its children in one className.
- [WFlexible](https://anilcancakir.com/wind_kit/docs/v0.0/widgets/wflexible.md): A utility-first wrapper for Flutter's Flexible that controls flex factor and fit through className utilities; renders a Spacer when no child is given.
- [WText](https://anilcancakir.com/wind_kit/docs/v0.0/widgets/wtext.md): A utility-first text widget that extends Flutter's Text, styling inline text through className utilities. The text content is passed as the first positional…

## Backgrounds

- [Background Color](https://anilcancakir.com/wind_kit/docs/v0.0/backgrounds/background-color.md): Apply background colors to widgets using predefined theme colors or arbitrary hex values.

## Concepts

- [Dark Mode](https://anilcancakir.com/wind_kit/docs/v0.0/concepts/dark-mode.md): Switch your entire app between light and dark themes with a single call. Wind automatically inverts every color in your palette, so widgets styled with…
- [Responsive Design](https://anilcancakir.com/wind_kit/docs/v0.0/concepts/responsive-design.md): Adapt layouts across screen sizes with breakpoint prefixes. Inspired by TailwindCSS, Wind lets you write responsive styles such as sm:w-full or lg:w-100…
- [State-Based Styling](https://anilcancakir.com/wind_kit/docs/v0.0/concepts/state-based-styling.md): Apply styles that react to a widget's state, such as hover or disabled, using prefixed utility classes. Wind's classNameParser function resolves these prefixes…
- [Utility-First](https://anilcancakir.com/wind_kit/docs/v0.0/concepts/utility-first.md): Utility-first is a design methodology built on small, single-purpose classes that compose into complex designs. Wind brings this approach to Flutter: instead…

## Customization

- [Customizing Colors](https://anilcancakir.com/wind_kit/docs/v0.0/customization/colors.md): The WindTheme class ships a TailwindCSS-inspired color palette and lets you read, extend, and override colors through static helpers.
- [Font Family Customization](https://anilcancakir.com/wind_kit/docs/v0.0/customization/font-family.md): Customize the body and display fonts of your application through WindTheme, backed by the Google Fonts library.
- [Customizing Font Sizes](https://anilcancakir.com/wind_kit/docs/v0.0/customization/font-size.md): Manage the typographic scale through WindTheme: pre-defined sizes, arbitrary values, and programmatic customization.
- [Customizing Font Weight](https://anilcancakir.com/wind_kit/docs/v0.0/customization/font-weight.md): Manage font weights through WindTheme: pre-defined keys mapped to Flutter FontWeight values, customizable at runtime.
- [Customizing Letter Spacing](https://anilcancakir.com/wind_kit/docs/v0.0/customization/letter-spacing.md): Manage character spacing through WindTheme: pre-defined keys, arbitrary values, and runtime customization.
- [Customizing Line Height](https://anilcancakir.com/wind_kit/docs/v0.0/customization/line-height.md): Manage line heights through WindTheme: pre-defined keys, arbitrary values, and runtime customization.
- [Pixel Factor Customization](https://anilcancakir.com/wind_kit/docs/v0.0/customization/pixel-factor.md): The pixel factor emulates the CSS rem unit, providing a single multiplier that scales all size-related values across your application.
- [Customizing Rounded Corners](https://anilcancakir.com/wind_kit/docs/v0.0/customization/rounded-corners.md): Manage corner radii through WindTheme: pre-defined sizes, arbitrary values, and runtime customization.
- [Customizing Shadows](https://anilcancakir.com/wind_kit/docs/v0.0/customization/shadows.md): Manage shadow sizes through WindTheme: pre-defined keys, arbitrary values, and runtime customization.

## Effects

- [Shadow](https://anilcancakir.com/wind_kit/docs/v0.0/effects/shadow.md): Apply shadow effects to widgets using predefined elevation keys or arbitrary pixel values.

## Example

- [Product Grid](https://anilcancakir.com/wind_kit/docs/v0.0/example/product-grid.md): A responsive product collection grid that switches from a single-column layout on small screens to a multi-column row layout on medium screens and above.

## Flex

- [Align Items](https://anilcancakir.com/wind_kit/docs/v0.0/flex/align-items.md): Control how children are positioned along the cross axis of a flex container using the items-* utilities.
- [Alignment](https://anilcancakir.com/wind_kit/docs/v0.0/flex/alignment.md): Position a widget within its container using the alignment-* utilities. These map directly to Flutter's Alignment constants and work on any WContainer.
- [Axis Sizes](https://anilcancakir.com/wind_kit/docs/v0.0/flex/axis-sizes.md): Control how much space a flex container occupies along its main axis using axis-max and axis-min.
- [Flex Direction](https://anilcancakir.com/wind_kit/docs/v0.0/flex/flex-direction.md): Set the layout direction of a flex container — horizontal row or vertical column — using flex-row and flex-col.
- [Flex Fit](https://anilcancakir.com/wind_kit/docs/v0.0/flex/flex-fit.md): Control how a child widget sizes itself within a flex container using flex-grow and flex-auto.
- [Flex-x](https://anilcancakir.com/wind_kit/docs/v0.0/flex/flex-x.md): Assign a numeric flex factor to a child widget using flex-N, where N is a positive integer. Higher numbers claim proportionally more space.
- [Gap](https://anilcancakir.com/wind_kit/docs/v0.0/flex/gap.md): Add consistent spacing between flex children using gap-N (scaled by the pixel factor) or gap-[N] (fixed pixels).
- [Justify Content](https://anilcancakir.com/wind_kit/docs/v0.0/flex/justify-content.md): Control how children are distributed along the main axis of a flex container using the justify-* utilities.

## Sizing

- [Height](https://anilcancakir.com/wind_kit/docs/v0.0/sizing/height.md): Control the height of widgets using the h-* utilities. Supports pixel-based, percentage-based, and viewport-relative values.
- [Max-Height and Min-Height](https://anilcancakir.com/wind_kit/docs/v0.0/sizing/max-height-min-height.md): Constrain the maximum and minimum heights of widgets using the max-h-* and min-h-* utilities. Supports pixel-based, percentage-based, and viewport-relative…
- [Max-Width and Min-Width](https://anilcancakir.com/wind_kit/docs/v0.0/sizing/max-width-min-width.md): Constrain the maximum and minimum widths of widgets using the max-w-* and min-w-* utilities. Supports pixel-based, percentage-based, and viewport-relative…
- [Width](https://anilcancakir.com/wind_kit/docs/v0.0/sizing/width.md): Control the width of widgets using the w-* utilities. Supports pixel-based, percentage-based, and viewport-relative values.

## Spacing

- [Margin](https://anilcancakir.com/wind_kit/docs/v0.0/spacing/margin.md): Apply outer spacing to widgets using the m-* utilities. Values are multiplied by the Pixel Factor or used directly as arbitrary pixel values.
- [Padding](https://anilcancakir.com/wind_kit/docs/v0.0/spacing/padding.md): Apply inner spacing to widgets using the p-* utilities. Values are multiplied by the Pixel Factor or used directly as arbitrary pixel values.

## Optional

- [Wind](https://anilcancakir.com/wind_kit): the package landing page
- [Full documentation](https://anilcancakir.com/wind_kit/docs/v0.0/llms-full.txt): every page in one file