//starter 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',

-   },

- });

// to create app with native wind

npx create-expo-app my-app

​

cd my-app

yarn add nativewind

yarn add --dev tailwindcss

// setup tailwindcss in react native

// tailwind.config.js

​

module.exports = {

- content: [],

+ content: ["./App.{js,jsx,ts,tsx}", "./<custom directory>/**/*.{js,jsx,ts,tsx}"],

  theme: {

    extend: {},

  },

  plugins: [],

}

// add the babel plugin

// babel.config.js

module.exports = function (api) {

  api.cache(true);

  return {

    presets: ["babel-preset-expo"],

+   plugins: ["nativewind/babel"],

  };

};

​