ReactNative with tailwindccss, className only accept one styling?

Question

First of all this is my first question ever so i apologies if it wastes anyones time.

Currently i've been trying to see if i can use tailwind with reactNative for one of my school projects. I've run into a problem postsetup (i assume postsetup).

The following code when exported to the web using expo start web displays indigo text and a black background in at the top of the browser.

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

   export default function App() {
     return (
       <>
    <View className="bg-black">
       <Text className="text-indigo-500">Open up App.js to start working on 
    your app!</Text>
        <StatusBar style="auto" />
        </View>
    
       </>
    
     );
    }

Now when i do the following:

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

    export default function App() {
      return (
        <>
     <View className="bg-black items-center">
         <Text className="text-indigo-500">Open up App.js to start 
    working on your app!</Text>
        <StatusBar style="auto" />
       </View>
    
       </>
    
     );
   } 

I've now added items-center to the view, and suddenly it doesn't display the background-color or align the text at the center. Why is this?

Answer 1

React components by default do not support tailwind. However, NativeWind makes it possible to use tailwind in react native