title: React Native Expo: What is an Alternate option for Tailwindcss TailwindProvider from nativewind
body: <p>I am integrating tailwindcss in react native project using expo but the older version of tailwindcss (<a href="https://tailwindcss-react-native.vercel.app" rel="nofollow noreferrer">https://tailwindcss-react-native.vercel.app</a>) is now deprecated and it is now nativewind (<a href="https://www.nativewind.dev/" rel="nofollow noreferrer">https://www.nativewind.dev/</a>)</p>
  <p>I am following  now nativewind(<a href="https://www.nativewind.dev/" rel="nofollow noreferrer">https://www.nativewind.dev/</a>)</p>
  <p>I have added the dependencies for tailwind</p>
  <pre><code>yarn add nativewind
  yarn add --dev tailwindcss
  </code></pre>
  <p>Then added <strong>tailwind.config.ts</strong></p>
  <pre><code>/** @type {import('tailwindcss').Config} */
  module.exports = {
    content: [
      &quot;./screens/**/*.{js,ts,jsx,tsx}&quot;,
      &quot;./pages/**/*.{js,ts,jsx,tsx}&quot;,
      &quot;./components/**/*.{js,ts,jsx,tsx}&quot;,
    ],
    theme: {
      extend: {},
    },
    plugins: [],
  }
  </code></pre>
  <p>then  updated <strong>babel.config.js</strong> as</p>
  <pre><code>module.exports = function(api) {
    api.cache(true);
    return {
      presets: ['babel-preset-expo'],
      plugins: [&quot;nativewind/babel&quot;],
    };
  };
  </code></pre>
  <p>Now I am trying to add the <strong>TailwindProvider</strong> in <strong>App.js</strong> file but getting the error</p>
  <pre><code>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 (
      &lt;NavigationContainer&gt;
        &lt;TailwindProvider&gt;
          &lt;Stack.Navigator&gt;
            &lt;Stack.Screen name='Home' component={HomeScreen} /&gt;
          &lt;/Stack.Navigator&gt;
        &lt;/TailwindProvider&gt;
      &lt;/NavigationContainer&gt;
    );
  }
  </code></pre>
  <p><strong>HomeScreen.js</strong></p>
  <pre><code>import { View, Text } from 'react-native'
  import React from 'react'
  
  export default function HomeScreen() {
    return (
      &lt;View&gt;
        &lt;Text&gt;HomeScreen&lt;/Text&gt;
      &lt;/View&gt;
    )
  }
  </code></pre>
  <p>Error is : <a href="https://i.stack.imgur.com/63rOt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/63rOt.png" alt="enter image description here" /></a>
  <a href="https://i.stack.imgur.com/ElEyg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ElEyg.png" alt="enter image description here" /></a></p>
  <p>I am stuck here how to use TailwindProvider with new API (<a href="https://www.nativewind.dev/quick-starts/expo" rel="nofollow noreferrer">https://www.nativewind.dev/quick-starts/expo</a>)</p>