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

score 3 · Answer 1 · answered Oct 22 '22 at 21:09

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

score 2 · Answer 2 · answered Oct 03 '22 at 01:09

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

answered Oct 03 '22 at 01:09

Kojo

51
1
5

Remember to remove `".//**/*.{js,jsx,ts,tsx}"]`, or sometimes it will not work ;) – Eklavya Chandra Feb 28 '23 at 17:35

score 2 · Answer 3 · answered Oct 23 '22 at 07:46

2

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

answered Oct 23 '22 at 07:46

Getban

31
3

1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Oct 26 '22 at 02:02
`expo start -c` fixes the issue for me – Benjamin J. Benoudis Jan 02 '23 at 15:27

score 0 · Answer 4 · answered Feb 28 '23 at 17:38

/** @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!!!

How to use nativewind for react native expo with react navigation

4 Answers4