What is NativeWind, and how does it let developers use Tailwind CSS in React Native?

Short answer

It translates Tailwind CSS classes into React Native-compatible StyleSheet objects at build time, enabling standard, concise className usage.

Explanation

NativeWind lets you share the same Tailwind design system between websites and mobile apps. Version 4 (v4) is built on Tailwind CSS v3 and works through a Babel plugin with Metro plus a lightweight runtime layer (react-native-css-interop), while version 5 targets Tailwind v4. It converts classes such as className="flex-1 bg-slate-900 p-4 rounded-xl" into optimized style objects, with a small runtime cost for dynamic states such as dark:, hover:, and breakpoints.

Code example

// Write familiar Tailwind classes in React Native with NativeWind
import { View, Text } from 'react-native';

export function UserCard({ name }: { name: string }) {
  return (
    <View className="p-4 bg-white dark:bg-zinc-800 rounded-2xl shadow-md flex-row items-center space-x-3">
      <Text className="text-lg font-bold text-gray-900 dark:text-white">{name}</Text>
    </View>
  );
}

Common mistakes

• Trying to use CSS classes unsupported by the Yoga engine, such as grid and subgrid, without using compatible alternatives.

Follow-up questions

• How do you smoothly manage dark and light mode using useColorScheme?
• What are the main differences between browser CSS and the styling system in React Native?

Sources

• NativeWind docs — Introduction
• React Native docs — Style