How to Set Up NativeWind in Expo Without Version Conflicts

The first time I tried setting up NativeWind in an Expo React Native app, I followed the official documentation step by step. Everything looked fine, but my app refused to run. I ran into multiple errors caused by mismatched package versions, and after hours of debugging, I ended up scrapping the setup and starting over.

After a few retries, I realized the problem wasn’t NativeWind itself, it was how complicated the setup became when too many dependencies and strict version requirements were involved.

If you’ve tried setting up NativeWind and hit the same wall, this guide is for you. After creating your React Native app with Expo, follow these steps to set up Tailwind with NativeWind:

1. Install NativeWind

In the official documentation, you’ll see several packages listed with specific versions. You don’t need all of that. If you’re using the latest version of React Native, you only need nativewind and tailwindcss.

npm install nativewind
npm install --dev tailwindcss prettier-plugin-tailwindcss

2. Set Up Tailwind CSS

Run npx tailwindcss init to generate a tailwind.config.js file.

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

Next, create a global.css file and add the Tailwind directives:

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

3. Add the Babel Preset

Create (or update) your babel.config.js file with the following configuration:

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

4. Create or Modify metro.config.js

Create a metro.config.js file in the root of your project and add this:

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

const config = getDefaultConfig(__dirname);

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

5. Import Your CSS File

Make sure your global CSS file is imported at the root of your app:

import "./global.css";

export default function App() {
  /* Your App */
}

6. Modify app.json

Update your app.json to ensure Metro is used for web builds:

{
  "expo": {
    "web": {
      "bundler": "metro"
    }
  }
}

7. TypeScript Setup (Optional)

If you’re using TypeScript, create a nativewind-env.d.ts file at the root of your project and add the following triple-slash directive:

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

That’s it. The only real difference from the official NativeWind documentation is the dependency installation step, I skipped the extra packages and fixed versions and installed only what’s actually needed. Everything else stays the same.

Hopefully, this guide saves you the time and frustration I went through. Happy styling 🚀