NativeWind Style Converter

NativeWind brings Tailwind CSS utility classes to React Native. Instead of React Native's StyleSheet.create({}) objects, you write className='flex-1 bg-white p-4' on your components — just like in web development. NativeWind translates these classes to React Native StyleSheet objects at build time (or via CSS variables on the New Architecture). It works with Expo and bare React Native projects.

NativeWind uses a subset of Tailwind classes that map to React Native style properties. Not all CSS properties are available — unsupported properties include box-shadow (use shadow-* classes instead), CSS grid (no equivalent), CSS animations (use Animated API), and some pseudo-classes. NativeWind also supports React Native-specific utilities like native: and ios:/android: platform variants.

No. NativeWind supports layout (flexbox), spacing, sizing, typography, colors, borders, opacity, and shadows. CSS properties without React Native equivalents — like background-image, CSS grid, clip-path, filter, or advanced pseudo-selectors — don't have NativeWind classes. For those, use inline styles with the style prop alongside className.

Install: npm install nativewind tailwindcss. Initialize Tailwind: npx tailwindcss init. Add NativeWind preset to tailwind.config.js: presets: [require('nativewind/preset')]. Add the Babel plugin to babel.config.js: plugins: ['nativewind/babel']. For Expo: add NativeWind to metro.config.js and app-level global.css. Run expo start and add className to your components.

NativeWind supports ios: and android: variants for platform-specific styles: className='p-4 ios:pt-safe-area-top android:bg-gray-900'. It also supports native: (applies only on native, not web) and web: (applies only when using React Native Web). The dark: variant works the same as in Tailwind but responds to React Native's useColorScheme() hook and Appearance API.

Yes. NativeWind v4 is the recommended styling solution for Expo Router projects. After installing NativeWind, add a global CSS file (global.css with @tailwind base/components/utilities), import it in your root _layout.tsx, and configure metro to handle CSS files. Expo Router's file-based routing works with NativeWind out of the box — each screen component can use className props normally.