# Tailwind CSS for Flutter Documentation > The official Tailwind CSS for Flutter documentation, optimized for LLMs. ## Getting Started - [Installation](https://fluttersdk.com/wind/getting-started/installation.md) - [Binding the Flutter Theme](https://fluttersdk.com/wind/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. ## Backgrounds - [Background Color](https://fluttersdk.com/wind/backgrounds/background-color.md) > Apply background colors to widgets using predefined theme colors or arbitrary hex values. ## Core Concepts - [Utility-First Fundamentals](https://fluttersdk.com/wind/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... - [Theme Configuration](https://fluttersdk.com/wind/core-concepts/theming.md) - [Theme Binding](https://fluttersdk.com/wind/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 ... - [Responsive Design](https://fluttersdk.com/wind/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, ut... - [Dark Mode](https://fluttersdk.com/wind/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, yo... - [State Management & Interactive Styles](https://fluttersdk.com/wind/core-concepts/state-management.md) - [Dynamic Rendering](https://fluttersdk.com/wind/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://fluttersdk.com/wind/core-concepts/debugging.md) ## Layout - [Display](https://fluttersdk.com/wind/layout/display.md) > Utilities for controlling the layout mode of an element. - [Flexbox & Layout](https://fluttersdk.com/wind/layout/flexbox.md) > Utilities for controlling flex containers, direction, alignment, wrapping, and spacing. - [Grid Template Columns](https://fluttersdk.com/wind/layout/grid.md) > Utilities for specifying the columns in a grid layout. - [Positioning](https://fluttersdk.com/wind/layout/positioning.md) > Utilities for controlling how elements are positioned in the layout using `relative` and `absolute` placement. - [Spacing](https://fluttersdk.com/wind/layout/spacing.md) > Utilities for controlling the padding and margin of elements. - [Sizing](https://fluttersdk.com/wind/layout/sizing.md) > Utilities for setting the width and height of elements. - [Aspect Ratio](https://fluttersdk.com/wind/layout/aspect-ratio.md) > Utilities for controlling the aspect ratio of an element. - [Overflow](https://fluttersdk.com/wind/layout/overflow.md) > Utilities for controlling how an element handles content that is too large for the container. - [Z-Index](https://fluttersdk.com/wind/layout/z-index.md) > Utilities for controlling the stack order of an element. ## Concepts - [Dark Mode](https://fluttersdk.com/wind/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 `bg-g... - [Responsive Design](https://fluttersdk.com/wind/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://fluttersdk.com/wind/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 ... - [Utility-First](https://fluttersdk.com/wind/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... ## Typography - [Font Family](https://fluttersdk.com/wind/typography/font-family.md) > Utilities for controlling the typeface of text. - [Font Size](https://fluttersdk.com/wind/typography/font-size.md) > Utilities for controlling the font size of an element. - [Font Style](https://fluttersdk.com/wind/typography/font-style.md) > Toggle between italic and normal text style using simple class names. - [Font Weight](https://fluttersdk.com/wind/typography/font-weight.md) > Utilities for controlling the font weight of an element. - [Line Height](https://fluttersdk.com/wind/typography/line-height.md) > Utilities for controlling the leading (line height) of an element. - [Letter Spacing](https://fluttersdk.com/wind/typography/letter-spacing.md) > Utilities for controlling the tracking (letter spacing) of an element. - [Text Align](https://fluttersdk.com/wind/typography/text-align.md) > Utilities for controlling the alignment of text. - [Text Color](https://fluttersdk.com/wind/typography/text-color.md) > Utilities for controlling the text color of an element. - [Text Transform](https://fluttersdk.com/wind/typography/text-transform.md) > Utilities for controlling the capitalization and wrapping of text. - [Text Decoration](https://fluttersdk.com/wind/typography/text-decoration.md) > Utilities for controlling the decoration of text. - [Text Overflow](https://fluttersdk.com/wind/typography/text-overflow.md) > Utilities for controlling how text behaves when it overflows its container. ## Customization - [Customizing Colors](https://fluttersdk.com/wind/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://fluttersdk.com/wind/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://fluttersdk.com/wind/customization/font-size.md) > Manage the typographic scale through `WindTheme`: pre-defined sizes, arbitrary values, and programmatic customization. - [Customizing Font Weight](https://fluttersdk.com/wind/customization/font-weight.md) > Manage font weights through `WindTheme`: pre-defined keys mapped to Flutter `FontWeight` values, customizable at runtime. - [Customizing Letter Spacing](https://fluttersdk.com/wind/customization/letter-spacing.md) > Manage character spacing through `WindTheme`: pre-defined keys, arbitrary values, and runtime customization. - [Customizing Line Height](https://fluttersdk.com/wind/customization/line-height.md) > Manage line heights through `WindTheme`: pre-defined keys, arbitrary values, and runtime customization. - [Pixel Factor Customization](https://fluttersdk.com/wind/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://fluttersdk.com/wind/customization/rounded-corners.md) > Manage corner radii through `WindTheme`: pre-defined sizes, arbitrary values, and runtime customization. - [Customizing Shadows](https://fluttersdk.com/wind/customization/shadows.md) > Manage shadow sizes through `WindTheme`: pre-defined keys, arbitrary values, and runtime customization. ## Styling - [Background Color](https://fluttersdk.com/wind/styling/background-color.md) > Utilities for controlling an element's background color. - [Background Gradient](https://fluttersdk.com/wind/styling/background-gradient.md) > Utilities for creating linear gradients with customizable directions and color stops. - [Background Image](https://fluttersdk.com/wind/styling/background-image.md) > Utilities for controlling background images, sizing, positioning, and repeat behavior. - [Shadow](https://fluttersdk.com/wind/styling/shadow.md) > Utilities for controlling the box shadow of an element. - [Opacity](https://fluttersdk.com/wind/styling/opacity.md) > Utilities for controlling the opacity of an element. ## Effects - [Shadow](https://fluttersdk.com/wind/effects/shadow.md) > Apply shadow effects to widgets using predefined elevation keys or arbitrary pixel values. ## Borders - [Border Width, Color, & Radius](https://fluttersdk.com/wind/borders/borders.md) > Utilities for controlling border width, color, style, and border radius. - [Border Color](https://fluttersdk.com/wind/borders/border-color.md) > Apply colors to widget borders using predefined theme colors or arbitrary hex values. - [Ring Width, Color, and Offset](https://fluttersdk.com/wind/borders/ring.md) > Utilities for creating outline rings with box-shadows. These are useful for focus states or highlighting elements without affecting layout. - [Border Radius](https://fluttersdk.com/wind/borders/border-radius.md) > Round widget corners with predefined size keys or arbitrary pixel values. - [Border Width](https://fluttersdk.com/wind/borders/border-width.md) > Control the thickness of widget borders. The width value maps directly to pixels. ## Example - [Product Grid](https://fluttersdk.com/wind/example/product-grid.md) > A responsive product collection grid that switches from a single-column layout on small screens ## Interactivity - [Animation](https://fluttersdk.com/wind/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 ut... - [Transitions](https://fluttersdk.com/wind/interactivity/transition.md) > Utilities for controlling the duration and easing of state transitions in Wind. ## Flex - [Align Items](https://fluttersdk.com/wind/flex/align-items.md) > Control how children are positioned along the cross axis of a flex container using the `items-*` utilities. - [Alignment](https://fluttersdk.com/wind/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://fluttersdk.com/wind/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://fluttersdk.com/wind/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://fluttersdk.com/wind/flex/flex-fit.md) > Control how a child widget sizes itself within a flex container using `flex-grow` and `flex-auto`. - [Flex-x](https://fluttersdk.com/wind/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://fluttersdk.com/wind/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://fluttersdk.com/wind/flex/justify-content.md) > Control how children are distributed along the main axis of a flex container using the `justify-*` utilities. ## Utilities - [Spacing Helpers](https://fluttersdk.com/wind/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 buildin... - [Typography Helpers](https://fluttersdk.com/wind/utilities/typography-helpers.md) - [Color Helpers](https://fluttersdk.com/wind/utilities/color-helpers.md) - [Responsive Helpers](https://fluttersdk.com/wind/utilities/responsive-helpers.md) > Responsive helpers provide programmatic access to Wind's breakpoint system, platform detection, and screen metrics directly from your Dart code. - [Context Extensions](https://fluttersdk.com/wind/utilities/context-extensions.md) - [Style Parser](https://fluttersdk.com/wind/utilities/style-parser.md) ## Widgets - [WText](https://fluttersdk.com/wind/widgets/w-text.md) > A utility-first text component that translates Tailwind-like class strings into optimized Flutter typography. - [WCard](https://fluttersdk.com/wind/widgets/wcard.md) > A utility-first card widget that wraps Flutter's `Card`, adding elevation, shadow, border, and padding through Wind className utilities. - [WDiv](https://fluttersdk.com/wind/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`, `F... - [WContainer](https://fluttersdk.com/wind/widgets/wcontainer.md) > A utility-first container widget that wraps Flutter's `Container`, styled directly with Wind className utilities. - [WSpacer](https://fluttersdk.com/wind/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 decora... - [WFlex](https://fluttersdk.com/wind/widgets/wflex.md) > A utility-first flex layout widget that wraps Flutter's `Flex`, controlling direction, alignment, spacing, and overflow through className utilities. - [WIcon](https://fluttersdk.com/wind/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 siz... - [WFlexContainer](https://fluttersdk.com/wind/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. - [WImage](https://fluttersdk.com/wind/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 fittin... - [WFlexible](https://fluttersdk.com/wind/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. - [WSvg](https://fluttersdk.com/wind/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 ... - [WText](https://fluttersdk.com/wind/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 positiona... - [WAnchor](https://fluttersdk.com/wind/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 `WindAnchorState... - [WButton](https://fluttersdk.com/wind/widgets/w-button.md) > `WButton` is an interactive component that combines `WAnchor` state management with Tailwind-like utility styling and built-in loading states. - [WPopover](https://fluttersdk.com/wind/widgets/w-popover.md) > A flexible popover component for creating dropdown menus, notification panels, user menus, tooltips, and similar overlay patterns. - [WBreakpoint](https://fluttersdk.com/wind/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://fluttersdk.com/wind/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. - [WCheckbox](https://fluttersdk.com/wind/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 F... - [WInput](https://fluttersdk.com/wind/widgets/w-input.md) > The `WInput` widget is a utility-first form input that combines React-style controlled state management with Tailwind-like styling. It replaces the standard ... - [WSelect](https://fluttersdk.com/wind/widgets/w-select.md) > A highly customizable, utility-first select component that supports single selection, multi-selection, searching, and remote data fetching. - [WDatePicker](https://fluttersdk.com/wind/widgets/w-date-picker.md) > A utility-first date picker component built on [WPopover](./w-popover.md) with support for single date selection, date range selection, min/max constraints, ... - [WFormCheckbox](https://fluttersdk.com/wind/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. - [WFormInput](https://fluttersdk.com/wind/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, labe... - [WFormSelect](https://fluttersdk.com/wind/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` ... - [WFormDatePicker](https://fluttersdk.com/wind/widgets/w-form-date-picker.md) > A form-integrated date picker that wraps [WDatePicker](./w-date-picker.md) with Flutter's `FormField`. Provides native form validation, automatic `... ## Sizing - [Height](https://fluttersdk.com/wind/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://fluttersdk.com/wind/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-relati... - [Max-Width and Min-Width](https://fluttersdk.com/wind/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-relativ... - [Width](https://fluttersdk.com/wind/sizing/width.md) > Control the width of widgets using the `w-*` utilities. Supports pixel-based, percentage-based, and viewport-relative values. ## Spacing - [Margin](https://fluttersdk.com/wind/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://fluttersdk.com/wind/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.