✓ Recommended
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.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.