Responsive Design

Nativewind supports responsive design using Tailwind CSS breakpoint variants and CSS media queries.

Breakpoint Variants

Tailwind's responsive variants (sm:, md:, lg:, xl:, 2xl:) work on native by using media queries based on window width. Please refer to the Tailwind CSS responsive design documentation for the full API.

<Text className="text-sm md:text-base lg:text-lg">
  Responsive text
</Text>

Media Queries

Nativewind supports the following media query types on native:

Platform Media Queries

Nativewind extends standard media queries with platform-specific selectors:

@media ios { /* iOS only */ }
@media android { /* Android only */ }
@media native { /* All native platforms */ }

These are available as custom variants in your classes: ios:, android:, native:, web:, tv:.

<Text className="font-sans ios:font-[System] android:font-[Roboto]">
  Platform-specific font
</Text>

Reactive Updates

Media queries on native are reactive. When the window dimensions change (e.g. device rotation, split screen), styles update automatically without re-rendering.