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 ponent 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: [],
}

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 ponent 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' ponent={Homescreen}/>
    </Stack.Navigator>
    </NavigationContainer>
   
  );
}

this is my Homescreen ponent 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

• javascript
• react-native
• tailwind-css
• react-native-navigation

4 Answers 4

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 ponent 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: [],
}

I found the solution

Create a custom directory for your screens or the other ponents 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: [],
}

Customizing my "tailwind.config.js" file and using expo start -c worked for me

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
   
    "./App.{js,jsx,ts,tsx}", 
    "./Components/**/*.{js,jsx,ts,tsx}"], // Make sure there should not be any <custom directory>, else it will not work
  theme: {
    extend: {},
  },
  plugins: [],
}

Edit the tailwind.config.js like this and move HomeScreen.js to the Components folder. No one can stop it from working!!!