Installation
Nativewind works with both Expo and framework-less React Native projects but Expo provides a more streamlined experience.
Web: If you'd like to use Metro to bundle for a website or App Clip and you are not using Expo, you will need either Expo's Metro config @expo/metro-config
or to manually use Tailwind CLI to generate a CSS file.
Expo | Framework-less | Next.js
If you'd like to skip manual setup and use Nativewind with Expo, you can use the following command to initialize a new Expo project with Nativewind and Tailwind CSS.
Installation with Expo
1. Install Nativewind
You will need to install nativewind
and its peer dependencies tailwindcss
, react-native-reanimated
and react-native-safe-area-context
.
2. Setup Tailwind CSS
Run npx tailwindcss init
to create a tailwind.config.js
file
Add the paths to all of your component files in your tailwind.config.js file.
Create a CSS file and add the Tailwind directives.
From here onwards, replace ./global.css
with the relative path to the CSS file you just created.
3. Add the Babel preset
4. Modify your metro.config.js
5. Import your CSS file
6. Modify your app.json
Switch the bundler to use the Metro bundler
7. TypeScript (optional)
Please follow the TypeScript guide.
Additional Setup Guides
- Using with Monorepos - Learn how to set up Nativewind in monorepo environments like NX
- Other Bundlers - Learn how to use Nativewind with other bundlers