I used nativewind this plugs, but it's only working app.js not working login.jsx, where has problem?

Question

I used nativewind this plugs, but it's only working app.js not working login.jsx, where has problem?

When I writed this code in app.js, it's working.

export default function App() {
  return (
    <View className="flex-1 items-center justify-center bg-white">
      <Text className="text-[40px] text-rose-500">Victoria</Text>
      <Text>CBD | GLEN T</Text>
      <StatusBar style="auto" />
      <LoginScreen />
    </View>
  );
}

But, when I tried to writed LoginScreen.jsx, the css isn't working.

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

export default function LoginScreen() {
  return (
    <View>
      <Image className="w-full h-[400px] object-cover" source={require('./../../assets/Victoria_logo.jpg')} />
      <Text className='font-bold text-rose-500'>Buy Beef</Text>
    </View>
  );
}

I don't know why the Text className css isn't working.

Answer 1

This is because your path in tailwind.config.js is not correct for other file like login or etc.

Just check my article how to configure tailwind in react native on below link:

Tailwind CSS in React Native

or check my this answer on stack: Config Tailwind in react native not working

Hope it will help you.