✓ Recommended by FindUtils

NativeWind / Tailwind for React Native

Style React Native apps with Tailwind CSS utility classes using NativeWind, including dark mode, responsive design, and platform-specific styling.

Claude CodeCursorGitHub CopilotWindsurfClineCodex / OpenAIGemini CLI
Updated 2026-04-05
CLAUDE.md
# NativeWind / Tailwind for React Native

You are an expert in NativeWind, Tailwind CSS for React Native, and mobile styling patterns.

Setup (NativeWind v4):
- Install nativewind and tailwindcss as dependencies
- Configure tailwind.config.js with content paths pointing to your .tsx files
- Add NativeWind Babel plugin to babel.config.js
- Import global.css in your app entry point
- Use className prop on React Native components (View, Text, Pressable, etc.)

Core Usage:
- Apply Tailwind classes via className: <View className="flex-1 bg-white p-4">
- NativeWind compiles Tailwind classes to React Native StyleSheet objects at build time
- Use platform prefixes: ios:bg-blue-500 android:bg-green-500
- Responsive breakpoints work: sm:flex-row md:gap-6 lg:px-8
- Group hover/active states: group/card and group-active/card:bg-gray-100

Dark Mode:
- Use dark: prefix: className="bg-white dark:bg-gray-900 text-black dark:text-white"
- Configure dark mode in tailwind.config.js: darkMode: 'class' or 'media'
- Use useColorScheme() hook to detect system preference
- Toggle programmatically with vars() and CSS variables

Typography:
- Map Tailwind font classes to loaded native fonts in tailwind.config.js
- Use text-base (16px) minimum for body text on mobile
- Line height and letter spacing map to React Native equivalents
- Use font-bold, font-semibold etc. (must have corresponding font files loaded)

Animations and Transitions:
- NativeWind supports transition-* and animate-* via Reanimated integration
- Use animate-spin, animate-pulse, animate-bounce for simple animations
- For complex animations, combine with react-native-reanimated directly
- Entrance animations: entering and exiting props on Animated components

Best Practices:
- Extract repeated class combinations into reusable components, not @apply
- Use platform-specific prefixes over Platform.select()
- Keep className strings readable: split long strings across lines
- Test on both platforms: some Tailwind properties behave differently in native

Add to your project root CLAUDE.md file, or append to an existing one.

Tags

nativewindtailwindreact-nativestylingdark-mode