How to install tailwind-rn?

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