Tailwind CSS is a joy to use on the web. Utility classes. Lightning-fast styling. Minimal CSS drama.

But here’s the catch:
Standard Tailwind CSS only supports the web platform.

React Native? Different universe.

To bring Tailwind-style utility classes into React Native, we use a bridge called NativeWind. Think of it as a translator that speaks both Tailwind and React Native fluently.

In this guide, we’ll set up:

• ✅ Expo project

• ✅ Tailwind CSS v3

• ✅ NativeWind

• ✅ TypeScript (optional setup included)

Let’s wire it up properly.

---

🧠 Why NativeWind?

NativeWind allows you to use Tailwind utility classes directly inside React Native components using the className prop.

Instead of:

<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }} />

You get:

<View className="flex-1 justify-center items-center" />

Cleaner. Faster. More expressive.

---

1️⃣ Install NativeWind and Dependencies

Install NativeWind along with its required peer dependencies:

npx expo install nativewind react-native-reanimated react-native-safe-area-context
npx expo install --dev tailwindcss@^3.4.17 prettier-plugin-tailwindcss@^0.5.11 babel-preset-expo

We are specifically using Tailwind CSS v3, since NativeWind is built around it.

---

2️⃣ Setup Tailwind CSS

Initialize Tailwind:

npx tailwindcss init

This creates a tailwind.config.js file.

Now configure it properly.

📁 tailwind.config.js

import { colors } from "./constants/colors.ts";

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./app/**/*.{js,jsx,ts,tsx}", "./components/**/*.{js,jsx,ts,tsx}"],
  presets: [require("nativewind/preset")],
  theme: {
    extend: {
      colors: {
        ...colors,
      },
    },
  },
  plugins: [],
};

Key points:

• Add all component paths inside content

• Add nativewind/preset

• Extend your theme if needed

---

🌍 Create a Global CSS File

Inside your app/ folder, create:

📁 app/global.css

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

Then import it in your layout file.

📁 app/_layout.tsx

import "./global.css";

This ensures Tailwind styles are available across the app.

---

3️⃣ Add the Babel Preset

Modify your babel.config.js.

📁 babel.config.js

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

This enables NativeWind’s JSX transformation magic.

---

4️⃣ Configure Metro

If you don’t already have a metro.config.js file in your root folder, create one.

📁 metro.config.js

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

const config = getDefaultConfig(__dirname);

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

This connects Metro bundler with NativeWind’s CSS pipeline.

---

5️⃣ Modify app.json

Switch Expo web bundler to Metro:

📁 app.json

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

Without this, Tailwind classes won’t compile correctly for web.

---

6️⃣ TypeScript Setup (Optional but Recommended)

If you're using TypeScript, create:

📁 nativewind-env.d.ts (root folder)

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

This ensures proper IntelliSense and type support for className.

---

7️⃣ Test Your Setup

Now let’s verify everything works.

import { Text, View } from "react-native";

export default function HomePage() {
  return (
    <View className="flex-1 items-center justify-center bg-white">
      <Text className="text-xl font-bold text-blue-500">
        Welcome to Nativewind!
      </Text>
    </View>
  );
}

Run your project:

npx expo start -c

If everything is configured correctly, you should see a centered blue heading.

---

🎉 That’s It!

You now have:

• Tailwind CSS v3

• NativeWind

• Expo

• TypeScript support

• Metro configured properly

Your React Native styling workflow just leveled up.

From here, you can:

• Create reusable UI components

• Extend themes

• Use dark mode

• Apply responsive utilities

Tailwind in React Native feels like upgrading from a paintbrush to a design jetpack.

Happy building 🚀