Why is my Tailwind CSS not doing anything? - react-native

Question

For some reason, I cannot get tailwind rn to actually style my program. When I run expo start, the items are not aligned to the center, even though I put that in my code.
import { StyleSheet, Text, View, Button } from 'react-native';
import {TailwindProvider} from 'tailwind-rn';
import utilities from './tailwind.json';
import {useTailwind} from 'tailwind-rn';
export default function App() {
const tailwind = useTailwind();
return (
<TailwindProvider utilities={utilities}>
<View style={tailwind('flex-1 items-center justify-center')}>
<Text>Hello</Text>
<StatusBar style="auto" />
</View>
</TailwindProvider>
);
}
Here is my package.json file:
{
"name": "mari-application",
"version": "1.0.0",
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject",
"build:tailwind": "tailwindcss --input input.css --output tailwind.css --no-autoprefixer && tailwind-rn",
"dev:tailwind": "concurrently \"tailwindcss --input input.css --output tailwind.css --no-autoprefixer --watch\" \"tailwind-rn --watch\""
},
"dependencies": {
"expo": "~45.0.0",
"expo-status-bar": "~1.3.0",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-native": "0.68.2",
"react-native-web": "0.17.7",
"tailwind-rn": "^4.2.0"
},
"devDependencies": {
"#babel/core": "^7.12.9",
"concurrently": "^7.2.2",
"postcss": "^8.4.14",
"tailwindcss": "^3.1.6"
},
"private": true
}

Answer 1

I ended up just downloading an older version of tailwind and it worked fine.

Answer 2

Follow these steps:
install npm i tailwind-rn
npx setup-tailwind-rn
Then wrap the root component with the TailwindProvider like:
import {TailwindProvider} from 'tailwind-rn';
import utilities from './tailwind.json';
import { StyleSheet, Text, View, Button} from 'react-native';
import {useTailwind} from 'tailwind-rn';
const App = () => (
const tailwind = useTailwind();
return(
<TailwindProvider utilities={utilities}>
<View style={tailwind("flex-1 justify-center items-center")}>
<Text>wwww</Text>
<Button title='click me' />
</View>
</TailwindProvider>
);
)
Credits: #Aniket:
https://stackoverflow.com/a/71122844/13431819
Or
Downgrade the tailwind version to version-2