name: olore-nativewind-4 version: 4 description: Local NativeWind v4 documentation reference. Use for Tailwind CSS in React Native, styling, theming, custom components, and cross-platform UI development.
NativeWind Documentation
NativeWind allows you to use Tailwind CSS to style React Native components across all platforms — using CSS StyleSheet on web and StyleSheet.create on native. Version 4 is powered by react-native-reanimated for transitions and animations.
Quick Reference
| Task | Entry Point |
|---|---|
| Getting started (Expo) | contents/getting-started/installation/index.mdx |
| Troubleshooting | contents/getting-started/troubleshooting.mdx |
| API reference | contents/api/ |
| Dark mode | contents/core-concepts/dark-mode.mdx |
| Custom components | contents/guides/custom-components.mdx |
| Theming / CSS variables | contents/guides/themes.mdx |
| Tailwind utility compatibility | contents/tailwind/ |
| Safe area insets | contents/tailwind/new-concepts/safe-area-insets.mdx |
When to use
Use this skill when the user asks about:
- Installing or configuring NativeWind in Expo, bare React Native, or Next.js
- Tailwind CSS class compatibility in React Native (which classes are supported)
- Dark mode, responsive design, states (hover/focus/active), and theming
- Custom component styling, third-party component integration, or monorepo setup
- Animations and transitions via react-native-reanimated
- API usage: cssInterop, remapProps, withNativeWind, useColorScheme, CSS variables
- rem units, safe area insets, or platform-specific differences
How to find information
- First, read
TOC.mdfor the complete file listing organized by directory - Identify the relevant section based on the user's question
- Read specific files for details
TOC.md contains all 104 files organized by directory — always check it first.