NativeWind

Overview

NativeWind 4.x bridges Tailwind CSS 3.x into React Native, enabling className props on View, Text, Pressable, ScrollView, and other RN components. Provides familiar Tailwind utility classes with native rendering.

Install: pnpm add nativewind tailwindcss@3 + babel/metro configuration

Workflows

Initial setup:

1. Install: pnpm add nativewind tailwindcss@3
2. Create tailwind.config.js with content paths pointing to app/, components/, etc.
3. Create global.css with @tailwind base; @tailwind components; @tailwind utilities;
4. Update babel.config.js: add nativewind/babel preset
5. Update metro.config.js: wrap with withNativeWind
6. Create nativewind-env.d.ts with /// <reference types="nativewind/types" />
7. Import global.css in root _layout.tsx