Responsive Design

// Stacked on mobile (default), horizontal on medium screens and up
WDiv(
  className: 'flex flex-col md:flex-row gap-4 p-4 bg-gray-100 md:bg-blue-50',
  children: [
    WDiv(className: 'w-full md:w-1/2 h-24 bg-blue-500'),
    WDiv(className: 'w-full md:w-1/2 h-24 bg-red-500'),
  ],
)

Mobile-First Approach#

Wind follows a mobile-first philosophy. This means that utility classes without a prefix apply to all screen sizes by default. Responsive modifiers like md: or lg: only apply when the screen width meets or exceeds the specified breakpoint.

Consider this example:

// Mobile: blue background, Desktop: green background
WDiv(className: 'bg-blue-500 lg:bg-green-500')

In this case, the bg-blue-500 class is the base style. The lg:bg-green-500 class only activates when the screen width is at least 1024px, overriding the base background colour.

Breakpoint Reference#

Wind includes five default breakpoints inspired by the standard Tailwind CSS scale.

Platform Prefixes#

In addition to screen sizes, Wind supports platform-specific modifiers. These allow you to apply styles based on the operating system or environment.

Example usage:

WDiv(
  className: 'p-4 ios:p-6 android:p-2 web:p-8',
  child: WText('Platform-specific padding'),
)

Combining Modifiers#

You can chain multiple modifiers to create highly specific styling rules. For example, you might want a hover effect that only applies in dark mode on large screens.

WButton(
  className: 'bg-blue-500 lg:dark:hover:bg-indigo-600',
  child: WText('Submit'),
)

Customizing Breakpoints#

If the default breakpoints do not match your project requirements, you can define custom screens in WindThemeData.

WindTheme(
  data: WindThemeData(
    screens: {
      'tablet': 600,
      'laptop': 900,
      'desktop': 1200,
    },
  ),
  child: MyApp(),
)

Once defined, these custom keys can be used as prefixes: tablet:p-4, laptop:flex-row, etc.

Related Documentation#

• Utility-First Fundamentals
• Theming
• Dark Mode
• State Management