What is NativeWind and How to Use It: Tailwind CSS for React Native

What is NativeWind?

NativeWind is a library that lets you use Tailwind CSS in React Native applications. Instead of writing React Native StyleSheet objects or platform-specific styles, you apply Tailwind-style utility classes via the className prop. The same mental model you use for web—flex-1, px-4, text-center—works on native, so you get consistent styling across platforms and a single vocabulary for layout and design.

Under the hood, NativeWind transforms those class names into React Native style objects. It integrates with Tailwind's theme, supports dark and light mode, and in v5 leverages CSS-based configuration (including CSS variables and modern Tailwind). That makes it a strong option if your team already knows Tailwind and wants to reuse that knowledge in mobile apps.

The project is actively maintained, with a pre-release v5 that aligns with Tailwind CSS v4 and adds features like P3 colors, CSS variables, and CSS animations. Many production apps use NativeWind (the NativeWind site lists a growing showcase), and the ecosystem includes UI kits such as NativewindUI, React Native Reusables, and gluestack that are built with Tailwind (NativeWind) in mind.

Getting Started with NativeWind

The fastest way to try NativeWind is with the automated setup. For a new React Native project with NativeWind preconfigured, you can use:

Quick Start with a New Project

# New project with NativeWind (v5)
npx rn-new@next --nativewind

For an existing Expo project, the recommended approach is to install the v5 (pre-release) packages and wire up Tailwind and Metro.

Installation with Expo (v5)

Install NativeWind and its peer dependencies, then Tailwind and PostCSS:

# Core dependencies
npx expo install nativewind@preview react-native-css react-native-reanimated react-native-safe-area-context

# Tailwind and tooling (dev)
npx expo install --dev tailwindcss @tailwindcss/postcss postcss

Create a postcss.config.mjs in your project root:

export default {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};

Add a global.css (or similar) with NativeWind and Tailwind layers, then import it at the top of your root component (e.g. App.js). Configure Metro with withNativewind from nativewind/metro so that CSS is processed correctly. Full step-by-step instructions are in the official v5 installation guide.

Your First NativeWind Component

Once setup is done, use className on React Native core components:

import { View, Text } from 'react-native'

export default function WelcomeScreen() {
  return (
    <View className="flex-1 justify-center items-center bg-white dark:bg-gray-900 px-8 py-4">
      <Text className="text-2xl font-bold text-gray-900 dark:text-white">
        Welcome to your App
      </Text>
      <Text className="text-base text-gray-600 dark:text-gray-300 mt-2">
        Styled with NativeWind
      </Text>
    </View>
  )
}

You get the same utility-first workflow as on the web: layout (flex-1, justify-center), spacing (px-8, mt-2), typography, and dark mode with dark: variants.

NativeWind vs Tamagui

Both NativeWind and Tamagui improve styling in React Native, but they start from different places. NativeWind is Tailwind-first: you use Tailwind classes and config (including v4 theme, CSS variables, and utilities). Tamagui is a design system and component library with its own tokens, components, and optimizing compiler that outputs platform-ideal code.

Styling approach

With NativeWind you keep the Tailwind mental model: className="flex-row gap-4 p-4". With Tamagui you use component props and design tokens: flexDirection="row" gap="$4" padding="$4". If your team already uses Tailwind on the web, NativeWind minimizes context switching; if you want a full design system and maximum compile-time optimization, Tamagui is the better fit.

Performance and optimization

Tamagui's compiler does tree flattening, dead code elimination, and platform-specific output. NativeWind turns class names into style objects and relies on Tailwind's purging and your Metro/bundler setup. For many apps both are fast enough; Tamagui has more built-in optimization machinery.

When to choose which

Choose NativeWind if you want Tailwind on React Native, already use Tailwind on the web, or prefer a lightweight layer that doesn’t replace the component model. Choose Tamagui if you want a full UI kit, design tokens, and an optimizing compiler, or are building a single codebase for web and native with a shared component system.

NativeWind v5: Dark Mode, CSS Variables, and Animations

NativeWind v5 (pre-release) brings the project in line with Tailwind CSS v4 and adds features that matter for modern apps. Dark and light mode work with the dark: variant so you can theme screens and components without extra libraries. CSS variables (and @theme) let you define colors, fonts, and spacing in one place and reuse them across the app. CSS animations and transitions give you consistent motion. Support for P3 colors improves color fidelity on capable devices.

Because v5 is still in pre-release, the docs recommend checking the v5 documentation for the latest setup and any breaking changes. For production today, some teams stay on a stable v4 setup while evaluating v5 in parallel.

NativeWind Go or No Go: What the Community Weighs

In community discussions (including threads like NativeWind go or no go on r/reactnative), developers often weigh a few recurring points when deciding whether to adopt NativeWind.

Production readiness and versioning

NativeWind v4 is used in production by many apps. v5 is explicitly a pre-release and not yet recommended for production; the API and tooling (PostCSS, Metro, Tailwind v4) are still evolving. A practical approach is to use v4 for stable production work and try v5 in new or non-critical projects until it’s declared stable.

Learning curve and consistency

If you already use Tailwind on the web, NativeWind feels familiar and reduces the cost of switching between web and mobile. If your team only knows React Native StyleSheet or other CSS-in-JS, there is a one-time learning cost for utility classes and Tailwind’s conventions—but that investment pays off if you standardize on Tailwind everywhere.

Maintenance and ecosystem

NativeWind is actively maintained, and the ecosystem around it is growing: NativewindUI, React Native Reusables, and gluestack offer copy-paste or full component libraries built for Tailwind (NativeWind). That makes it easier to ship UIs quickly while staying within the utility-first approach.

When it’s a good fit

NativeWind is a solid “go” if you want Tailwind on React Native, value a single styling language across web and mobile, and are okay with following the recommended setup (Metro, PostCSS, and optionally pinning dependencies like lightningcss for stability). It’s a “no go” or “wait” if you need a fully stable v5 immediately, prefer a design-system-first library like Tamagui, or want to avoid any extra build and CSS tooling.

UI Component Kits and Resources

The NativeWind ecosystem includes several UI kits that work well with Tailwind-style classes. NativewindUI offers dozens of components and flows aimed at a native look and feel. React Native Reusables lets you copy, paste, and adapt components for your own library. gluestack provides a comprehensive set of React and React Native components built with Tailwind (NativeWind). All of these can accelerate development while keeping you in the utility-first workflow.

The NativeWind site also has a showcase of apps built with NativeWind—from productivity and health to social and finance—which can help you gauge production use and design patterns.

Why NativeWind Matters for React Native

React Native has always required a different styling model than the web. NativeWind narrows that gap by bringing Tailwind’s utility-first approach and ecosystem to native. You get consistent spacing, typography, and colors across web and mobile, dark mode and theming with minimal code, and a single design vocabulary. For teams already invested in Tailwind, that can mean faster feature work and easier onboarding.

As v5 matures, better alignment with Tailwind v4 (including CSS-first config and variables) will make it even easier to share design tokens and build pipelines between web and React Native. Keeping an eye on the official docs and release notes is the best way to decide when to adopt v5 in production.

Getting Started Today

To try NativeWind, use the v5 installation guide (Expo or frameworkless) or the npx rn-new@next --nativewind quick start for a fresh project. Explore the docs for dark mode, CSS variables, and animations, and check out NativewindUI or React Native Reusables for ready-made components.

Visit nativewind.dev for the full documentation, showcase, and resources. Whether you’re evaluating NativeWind for a new app or considering it for an existing one, the “go or no go” decision usually comes down to your team’s familiarity with Tailwind, your need for v5 features, and how much you value a single styling system across web and React Native.