How to install tailwind-rn? - react-native

Question

I have been trying to use tailwind for my react native project but for some reason it won't work.
I've done "npm install tailwind-rn" and then "npx setup-tailwind-rn" but nothing changes in my app.
This is the code I have
import { StatusBar } from 'expo-status-bar';
import {SafeAreaView, View, Text} from 'react-native';
import {TailwindProvider, useTailwind} from 'tailwind-rn';
import utilities from './tailwind.json';
const App = () => {
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>
);
};
const Root = () => (
<TailwindProvider utilities={utilities}>
<App />
</TailwindProvider>
);
export default Root;
but all it does is get the "Hello Tailwind" sentence to the top left of the screen. Can anybody help me with this?

Answer 1

I think you didn't finish the remaining configuration

Answer 2

STEP1: What you need to do is first go and follow each and every instruction and you will be able to solve your issue.Tailwind CSS RN Docs
STEP2: Check your package.json it should look like this-
{
"name": "expo-tailwind-example",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"start": "expo start --dev-client",
"android": "expo run:android",
"ios": "expo run:ios",
"web": "expo start --web",
"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": "~44.0.2",
"expo-splash-screen": "~0.14.1",
"expo-status-bar": "~1.2.0",
"react": "17.0.1",
"react-dom": "17.0.1",
"react-native": "0.64.3",
"react-native-web": "0.17.1",
"tailwind-rn": "^4.2.0"
},
"devDependencies": {
"#babel/core": "^7.12.9",
"concurrently": "^7.0.0",
"postcss": "^8.4.12",
"tailwindcss": "^3.0.23"
},
"private": true
}
Initially your utilities will be empty, Do not panic but as you use classes it will be filled with styles.
CHILL