tailwind-rn tailwind function returns empty object - reactjs

Question

I was trying to set up tailwind-rn in my project, but it seems impossible. The documentation says you should use yarn add tailwind-rn to install, then npx setup-tailwind-rn to set it up. This is a code example on the github page:
import React from 'react';
import {SafeAreaView, View, Text} from 'react-native';
import {useTailwind} from 'tailwind-rn';
const Hello = () => {
const tailwind = useTailwind();
return (
<SafeAreaView style={tailwind('h-full')}>
<View style={tailwind('pt-12 items-center')}>
<View style={tailwind('bg-blue-200 px-3 py-1 rounded-full')}>
<Text style={tailwind('text-blue-800 font-semibold')}>
Hello Tailwind
</Text>
</View>
</View>
</SafeAreaView>
);
};
export default Hello;
My code looks like this:
import { StyleSheet, Text, View } from 'react-native';
import {useTailwind} from 'tailwind-rn';
export default function App() {
const tailwind = useTailwind();
return (
<View style={tailwind('text-white')}>
<Text>Open up App.js to start working on your app!</Text>
</View>
);
}
The code does not throw any error, but simply produces nothing. I also checked the value of tailwind('text-white'), which seems to be just an empty object. Why does that not work?

Answer 1

Add this to your dependencies (package.json)
"tailwind-react-native-classnames": "^1.5.1",
and Import it in your project page like this,
import tw from "tailwind-react-native-classnames";
Finally use the tailwind styles like this,
style={tw`flex-1`}
<View style={[tw`bg-gray-200`, { height: 0.6 }]} />
And finally your code will work.