0

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?

Enokkio
  • 1
  • 1

1 Answers1

0

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

PhantomSpooks
  • 2,877
  • 2
  • 8
  • 13
  • Have i confused react native compontents in some way then? Because when i simply add "bg-red-500" to the the background becimes red, but if were to also add "items-center" no styling will take effect. If i then remove the bg-red-500 the text will then be centered. Ive follow the react-native-tailwind setup tutorial provided on their website for expo setups – Enokkio Jan 29 '23 at 21:29
  • Could you give a link to the tailwindcss page? I went to tailwindcss.com but I didn’t see anything about there being a react native port – PhantomSpooks Jan 30 '23 at 01:14
  • https://www.nativewind.dev/quick-starts/expo , it seems ive missread and it is nativewind that im installing though i still have trouble with the actual problem. – Enokkio Jan 30 '23 at 06:39