Skip to main content
Version: v2

Create React Native App

1. Create a new React Native application

npx create-react-native-app my-nativewind-app

Choose "Default new app" and then move into the project's directory.

cd my-nativewind-app

You will need to install both nativewind and tailwindcss

tailwindcss is not used during runtime so it can be added as a development dependency.

npm install nativewind
npm install --save-dev tailwindcss@3.3.2
caution

NativeWind does not work with TailwindCSS >3.3.2. If you wish to use the most current version, please upgrade to NativeWind v4

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.

// tailwind.config.js

module.exports = {
- content: [],
+ content: ["./App.{js,jsx,ts,tsx}", "./screens/**/*.{js,jsx,ts,tsx}"],
theme: {
extend: {},
},
plugins: [],
}

3. Add the Babel plugin

Modify your babel.config.js

// babel.config.js
module.exports = {
- plugins: [],
+ plugins: ["nativewind/babel"],
};

Thats it 🎉

Start writing code!

import { StatusBar } from 'expo-status-bar';
import React from 'react';
- import { StyleSheet, Text, View } from 'react-native';
+ import { Text, View } from 'react-native';

export default function App() {
return (
- <View style={styles.container}>
+ <View className="flex-1 items-center justify-center bg-white">
<Text>Open up App.js to start working on your app!</Text>
<StatusBar style="auto" />
</View>
);
}

- const styles = StyleSheet.create({
- container: {
- flex: 1,
- backgroundColor: '#fff',
- alignItems: 'center',
- justifyContent: 'center',
- },
- });