How to use nativewind for react native expo with react navigation

Question

I've been trying to integrate tailwindcss to my react native expo project and it was working fine when i applied the tailwind classNames in the App.js , but as soon as I added react navigation to it and tried using the styles in Homscreen.js component the styles did not show and nothing happened . It was just bare text.

This is my tailwindcss.config.js file

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
   
    "./App.{js,jsx,ts,tsx}", 
    "./<custom directory>/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

this is my babel.config.js file

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: ["nativewind/babel"],
  };
};

this is my App.js file

import { StatusBar } from 'expo-status-bar';
import { Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import Homescreen from './screen/Homescreen';

export default function App() {

 const Stack=createNativeStackNavigator();

  return (
    <NavigationContainer>
    <Stack.Navigator>
      <Stack.Screen name='Home' component={Homescreen}/>
    </Stack.Navigator>
    </NavigationContainer>
   
  );
}

this is my Homescreen component Homescreen.js file

import { View, Text } from 'react-native'
import React from 'react'

const Homescreen = () => {

  return (
   <View className="flex-1 justify-center text-center">
    <Text className="text-green-700">
      HOme screen styles test
    </Text>
   </View>
  )
}

export default Homescreen

The code images and results tailwindcss.config.js and babel.config.js

App.js homescreen and results

Answer 1

Customizing your "tailwind.config.js" file for new directories in your react native expo app with react navigation is necessary but if your nativewind styling still won't work properly, then stopping the expo server and instead of starting it like this expo start, do this expo start -c to wipe the cache that nativewind adds to restart the server clean.

Source: https://www.nativewind.dev/guides/troubleshooting

When customizing your "tailwind.config.js" file, after creating your custom "screens" directory or any other component directory, then add that directory path "./screens/**/*.{js,jsx,ts,tsx}" to the "content:" property in your "tailwind.config.js". You don't have to but should delete "./<custom directory>/**/*.{js,jsx,ts,tsx}"], That will keep your code clean and is really just for instructional purposes, see below:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./App.{js,jsx,ts,tsx}", "./screens/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Answer 2

I found the solution

Create a custom directory for your screens or the other components then add that directory to your tailwind.config.css

In my case the custom directory i created is "screens"

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
   
    "./App.{js,jsx,ts,tsx}", 
    "./screens/**/*.{js,jsx,ts,tsx}",
    "./<custom directory>/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}