Why is my Tailwind CSS not doing anything?-CodePudding

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
}

CodePudding user response：

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

CodePudding user response：

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