Set-up a React Native project from scratch

Create a project directory

mkdir my-simple-app
cd my-simple-app

Install

npx create-expo-app@latest .
npm run reset-project

https://www.nativewind.dev/docs/getting-started/installation

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

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

Add globals.css in app folder.

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

Add babel.config.js in the project folder.

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

Add metro.config.js. Make sure the input points to the globals.css location.

npx expo customize metro.config.js

const { getDefaultConfig } = require("expo/metro-config");
const { withNativeWind } = require('nativewind/metro');
 
const config = getDefaultConfig(__dirname)
 
module.exports = withNativeWind(config, { input: './app/globals.css' })

Download the Expo app

Run

npx expo start