NativeWind V4 Not working with ReactNative, TypeScript and Expo

Follow the below step to fix the issue

Install NativeWind

npm install nativewind tailwindcss react-native-reanimated react-native-safe-area-context

Create TailWind Config file

npx tailwindcss init

#Paste the below content to the config file
/** @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: [],
}

Create file named global.css in the root of your folder

@tailwind base;
@tailwind components;
@tailwind utilities;

Create babel.config.js file and Add the below config

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

Modify your metro.config.js​

If your project does not have a metro.config.js run npx expo customize metro.config.js and paste the below code

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

const config = getDefaultConfig(__dirname);

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

Import the Global.css file in app/_layout.tsx file

import "../global.css";

Create app.d.ts file in the root of your project folder and follow the below content

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

Don’t Forget to restart the server once you have done these changes

Please hit a like and follow me to subscribe for more content like this 🙂