React Native Expo with NativeWind v4 and Typescript

I'm writing this because I faced the problem recently. When I was wasting my time, the solution was right in front of me in documentation.

Steps

Create an expo app

npx create-expo-app@latest

this will create a template for your project.

NativeWind v4 installation

Step 1

Install nativewind in expo with necessary packages given in doc

npx expo install nativewind tailwindcss react-native-reanimated react-native-safe-area-context

Step 2

then run

npx tailwindcss init

this will create an tailwind.config.js file.
and paste this, also find it in documentation of nativewind v4

/** @type {import('tailwindcss').Config} */
module.exports = {
  // NOTE: Update this to include the paths to all of your component files.
  content: ["./app/**/*.{js,jsx,ts,tsx}"],
  presets: [require("nativewind/preset")],
  theme: {
    extend: {},
  },
  plugins: [],
}

Step 3

Now, create a global.css file in root directory.

Step 4

Update babel.config.js. If you are using expo which is below 50 then follow expo below 49 sdk

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

Step 5

Create metro.config.js if not have, then add this below codes. This is for Expo SDK 50+ only. If you are using expo which is below 50 then follow expo below 49 sdk

const { getDefaultConfig } = require("expo/metro-config");
const { withNativeWind } = require("nativewind/metro");

const config = getDefaultConfig(__dirname);

module.exports = withNativeWind(config, { input: "./global.css" });

Step 6

Create an nativewind-env.d.ts file and add

/// <reference types="nativewind/types" />

For the final step, import the global.css to the app/_laybout.tsx

import { Stack } from "expo-router";
import * as SplashScreen from "expo-splash-screen";
import "react-native-reanimated";

import "../global.css";

// Prevent the splash screen from auto-hiding before asset loading is complete.
SplashScreen.preventAutoHideAsync();

export default function RootLayout() {
  return (
    <Stack>
      <Stack.Screen name="index" options={{ headerShown: false }} />
    </Stack>
  );
}

Now, tailwindcss is working in your react native expo project with NativeWind v4.

import React from "react";
import { Text } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";

const App = () => {
  return (
    <SafeAreaView>
      <Text className="text-blue-600 font-bold text-3xl ">
        Creating app with expo
      </Text>

    </SafeAreaView>
  );
};

export default App;

Working...

Note: All these are written in the Official documentation of NativeWind. I just wanted to keep them here, so that no newbie face the problem like me and waste their precious time.

Blog