Skip to main content

​
Cross-Platform Styling Made Simple

NativeWind brings the power of Tailwind CSS to React Native, delivering a consistent styling experience across iOS, Android, and Web. The library automatically uses the best style engine for each platform, ensuring optimal performance and native feel.

​
Supported Platforms

NativeWind v5 supports all major React Native platforms with platform-specific optimizations:

iOS

Native iOS styling with full support for platform-specific features

Android

Optimized Android rendering with native performance

Web

CSS-based styling for React Native Web applications

​
How It Works

NativeWind processes styles during your application’s build step and uses a minimal runtime to apply reactive styles:
1

Build-time Processing

Styles are compiled during the build step using the Tailwind CSS compiler, ensuring zero runtime overhead for static styles.
2

Platform Detection

NativeWind automatically detects your target platform and uses the appropriate style engine:
  • Native platforms (iOS/Android): StyleSheet.create from React Native
  • Web platform: CSS StyleSheets for optimal browser performance
3

Minimal Runtime

A lightweight runtime handles reactive styles like dark mode, orientation changes, and responsive breakpoints.

​
Key Features Across All Platforms

NativeWind provides consistent feature support across platforms:

​
Styling Features

  • Tailwind CSS Utilities: Full access to Tailwind’s utility classes
  • Dark Mode: Automatic dark mode support with dark: modifier
  • Responsive Design: Media queries and breakpoints
  • Arbitrary Classes: Use custom values with [value] syntax
  • CSS Variables: Custom properties for dynamic theming

​
Advanced Features

NativeWind supports animations and transitions across all platforms. On native platforms, animations are powered by React Native’s Animated API, while web uses CSS animations.
<View className="transition-all duration-300 ease-in-out">
  <Text className="animate-pulse">Animating text</Text>
</View>
Interactive pseudo classes work on compatible components:
  • hover: - Hover states (Web and some native components)
  • focus: - Focus states
  • active: - Active/pressed states
<Pressable className="bg-blue-500 active:bg-blue-700">
  <Text>Press me</Text>
</Pressable>
Container queries allow you to style components based on their parent’s size:
<View className="@container">
  <Text className="@sm:text-lg @md:text-xl">Responsive text</Text>
</View>
Style-based container queries are not currently supported.
Use group and group/<name> syntax to style children based on parent state:
<Pressable className="group">
  <Text className="group-active:text-blue-500">Child responds to parent</Text>
</Pressable>

​
Setup by Platform

Choose your development environment to get started:

Expo

Recommended for most projects. Quick setup with Expo SDK 54+

React Native CLI

For projects using React Native CLI or brownfield apps

React Native Web

Add web support to your React Native application

​
Platform-Specific Considerations

While NativeWind aims for consistency across platforms, some features may have platform-specific behavior:
  • Shadows: Use elevation-* on Android for better shadow support
  • Fonts: Font families must be available on the target platform
  • Safe Areas: Use tailwindcss-safe-area plugin for device-specific padding

​
Requirements

All platforms require:
  • Node.js: Version 20 or higher
  • Tailwind CSS: Version 4.1.11 or higher
  • react-native-css: Version 3.0.1 or higher
  • React: Version 19.1.0 or higher
  • React Native: Version 0.81.4 or higher
NativeWind v5 is currently in preview. For production apps, you may want to use NativeWind v4.1.

​
Quick Start

The fastest way to get started with NativeWind: 
# Create new Expo project with NativeWind v4.1
npx rn-new@latest --nativewind

# Or for NativeWind v5 (preview)
npx rn-new@next --nativewind
This creates a pre-configured project ready to use on all platforms.

​
Next Steps

1

Choose Your Platform

Select your development environment from the guides above
2

Configure Your Project

Follow the platform-specific setup instructions
3

Start Styling

Begin using Tailwind classes in your React Native components