Skip to main content
NativeWind allows you to use Tailwind CSS to style your React Native applications. It’s not a component library—it’s a styling library that ensures you’re using the best style engine for any given platform.
NativeWind v5 is currently in preview. This documentation covers version 5.0.0-preview.2.

​
What is NativeWind?

NativeWind processes your styles during your application’s build step and uses a minimal runtime to selectively apply reactive styles (e.g., changes to device orientation, light/dark mode). Its goals are to provide a consistent styling experience across all platforms, improving developer UX, component performance, and code maintainability. Unlike traditional styling solutions, NativeWind makes sure you’re using the best style engine for each platform:
  • Web: CSS StyleSheet
  • Native: React Native’s StyleSheet.create

​
Key Features

NativeWind works on all React Native platforms and includes extensive support for modern CSS features:

Build-Time Processing

Styles are computed at build time, keeping your components fast with a minimal runtime

Tailwind CSS Compiler

Uses the official Tailwind CSS compiler for full compatibility

CSS Variables

Full support for custom CSS properties and CSS variables

Dark Mode

Built-in dark mode, arbitrary classes, and media queries

Animations

Support for animations and transitions

Container Queries

Container queries for responsive component-level styling

​
Advanced Features

  • Pseudo Classes: hover, focus, and active states on compatible components
  • Parent State Modifiers: Style children based on parent pseudo classes using group and group/<name> syntax
  • Children Styles: Create simple layouts based on parent classes
  • rem Units: Consistent sizing across platforms
  • Theme Functions: Nested functions and theme customization
  • React 18 Suspense API: Modern React features support
  • Custom CSS: Extend with your own custom styles

​
How It Works

NativeWind integrates with your Metro bundler configuration and processes your Tailwind classes at build time. Here’s a simple example: 
import { View, Text } from "react-native";
import "./global.css";

export default function App() {
  return (
    <View className="justify-center items-center h-full">
      <Text className="text-red-500">Hello NativeWind!</Text>
    </View>
  );
}
The className prop works just like in web development, but renders using native components under the hood.

​
Browser and Platform Support

NativeWind works on all React Native platforms:
  • iOS
  • Android
  • Web
  • macOS (via React Native macOS)
  • Windows (via React Native Windows)
Container type queries and style-based container queries are not currently supported.

​
Version Requirements

NativeWind v5 requires Node.js 20 or later.
Peer Dependencies:
  • react-native-css: ^3.0.1
  • tailwindcss: >4.1.11

​
Next Steps

Ready to get started? Follow our guides to set up NativeWind in your project:

Installation

Install and configure NativeWind for your platform

Quick Start

Build your first styled component in minutes

​
Community and Support

Join the NativeWind community:

​
Looking for Components?

NativeWind is a styling library, not a component library. If you’re looking for pre-built components that use NativeWind, check out: