Why is my Tailwind CSS not doing anything?

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

For anyone viewing this and not wanting to download an old version, a lot has changed in the past few months - Tailwind is now "NativeWind"

yarn add nativewind
yarn add --dev tailwindcss

the setup is very similar to regular TailWindCSS, you just need to add your file classes to the tailwind config:

// tailwind.config.js

module.exports = {
content: ["./App.{js,jsx,ts,tsx}", "./<custom directory>/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

then add the plugin to your babel config:

// babel.config.js

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
    plugins: ["nativewind/babel"],
  };
};

Then you style as normal Tailwind, you can remove the StyleSheet import and provider code as well:

import { Text, View, Button } from 'react-native';

export default function App() {

  return (
      <View className='flex-1 items-center justify-center'>
        <Text>Hello</Text>
        <StatusBar style="auto" />
    </View>
    
  );
}