Question 34571 in React native Question posted in
The official React Native documentation can be found here.

React Native Expo: What is an Alternate option for Tailwindcss TailwindProvider from nativewind

I am integrating tailwindcss in react native project using expo but the older version of tailwindcss (https://tailwindcss-react-native.vercel.app) is now deprecated and it is now nativewind (https://www.nativewind.dev/)

I am following now nativewind(https://www.nativewind.dev/)

I have added the dependencies for tailwind

yarn add nativewind
yarn add --dev tailwindcss

Then added tailwind.config.ts

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

then updated babel.config.js as

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

Now I am trying to add the TailwindProvider in App.js file but getting the error

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import HomeScreen from './screens/HomeScreen';
import { TailwindProvider } from 'nativewind';
//import { TailwindProvider } from 'tailwindcss-react-native';

export default function App() {

  const Stack = createNativeStackNavigator()
  return (
    <NavigationContainer>
      <TailwindProvider>
        <Stack.Navigator>
          <Stack.Screen name='Home' component={HomeScreen} />
        </Stack.Navigator>
      </TailwindProvider>
    </NavigationContainer>
  );
}

HomeScreen.js

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

export default function HomeScreen() {
  return (
    <View>
      <Text>HomeScreen</Text>
    </View>
  )
}

Error is : enter image description here
enter image description here

I am stuck here how to use TailwindProvider with new API (https://www.nativewind.dev/quick-starts/expo)

Tags:

2

Answers


  1. 0

    I’ve been using tailwind-react-native-classnames without issues.

    Login or Signup to reply.
  2. 0

    I was facing the same problem about 30 minutes ago and this is what i did. I stopped the app deleted the component and recreated the component again and i don’t know why but for some reason it started working… and i don’t think you need "tailwindprovider" when using nativewind … using mine without it and works just fine

    my App.js

    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 Home from './screens/Home';

export default function App() {

 const Stack=createNativeStackNavigator();

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

    my Home.js component

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

const Home = () => {
  return (
    <View >
      <Text className="text-red-600">Home screen style test</Text>
    </View>
  )
}

export default Home
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search