React Native Expo + NativeWind Tailwind CSS Boilerplate code Tutorial

If you're building React Native apps and want the power of Tailwind CSS, this boilerplate will save you hours of setup. In this guide, you'll learn how to configure React Native Expo with NativeWind, Tailwind CSS, and Prettier to create a modern, scalable mobile app environment.

YouTube Video Tutorial

Here’s a full step-by-step video walkthrough of the setup process:

To set up Tailwind CSS in a React Native Expo project using NativeWind, you’ll need to follow a few configuration steps. 

This boilerplate is built from scratch using the official Expo CLI, and it integrates Tailwind’s utility-first classes with the NativeWind library - bringing responsive, maintainable styling to your mobile apps. Below are the exact steps followed to create the setup, including installing dependencies, configuring Tailwind and Babel, enabling Metro support, and testing your first styled component. By the end of this process, you’ll have a clean and ready-to-use React Native environment with full Tailwind CSS support.

1. Create a New Expo Project

We’ll start by creating a new Expo app using the official CLI.

npx create-expo-app@latest react-native-expo-nativewind-tailwind
cd react-native-expo-nativewind-tailwind
npx expo start

You can preview the app instantly on your mobile device using the Expo Go app.

2. Install Prettier (Optional but Recommended)

To auto-format code

npm install prettier -D

3. Install NativeWind and Dependencies

npm install nativewind react-native-reanimated@~3.17.4 [email protected]
npm install -D tailwindcss@^3.4.17 prettier-plugin-tailwindcss@^0.5.11

4. Initialize Tailwind Configuration

Run this command to generate the Tailwind config:

npx tailwindcss init

Then, update tailwind.config.js:

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

5. Create Global Styles

Create a file called global.css in project root and add Tailwind directives:

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

6. Add Babel Preset

Update babel.config.js to support NativeWind:

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

7. Update Metro Config

Create or update metro.config.js in the root:

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

const config = getDefaultConfig(__dirname);

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

8. Modify app.json for Web Support

To ensure Metro is used as the bundler for web:

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

9. Add TypeScript Definitions (Optional)

If you're using TypeScript, add the following to a new file named nativewind-env.d.ts:

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

10. Import global.css & Test Tailwind

In your app/_layout.tsx, import the global styles.

import "../global.css";

Then try using a Tailwind class in app/(tabs)/index.tsx:

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

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

You should now see Tailwind styles applied!

GitHub Repo 

Access the full working code here: React Native Expo + NativeWind Boilerplate

With this boilerplate, you're ready to build fast, responsive, and well-structured mobile apps using React Native, Expo, and Tailwind CSS via NativeWind. It’s a great starting point for projects that need a clean and modern UI without the hassle of complex setup.