Nativewind의 공식 문서를 토대로 하지만 Expo가 router구조를 사용함에 따라 프로젝트에 맞게 수정한 코드가 있습니다.

Expo + Nativewind 적용

1. Nativewind 설치

npm install nativewind react-native-reanimated@~3.17.4 react-native-safe-area-context@5.4.0
npm install -D tailwindcss@^3.4.17 prettier-plugin-tailwindcss@^0.5.11

2. Tailwind 설정

npx tailwindcss init를 사용해 tailwind.config.js를 생성하고 아래 코드로 수정합니다.
content는 적용할 위치입니다. router구조를 사용중이라면 아래와 같이 수정합니다.

/** @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: [],
}

global.css 파일을 루트 디렉토리에 생성 후 아래 코드를 작성합니다.

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

_layout.tsx 루트 레이아웃에 import ../global.css를 적용합니다.

3. config.js 파일 수정

babel.config.js와 metro.config.js를 수정합니다.
epxo 프로젝트에 두 config 파일이 없다면 생성해 줍니다.

npx expo customize babel.config.js

npx expo customize metro.config.js

babel.config.js

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

metro.config.js

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

4. app.json 수정

expo web의 bundler를 metro로 수정해 줍니다.

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

5. typescirpt 설정

본인의 프로젝트가 typescript라면 아래의 트리플 슬래시 지시문을 nativewind-env.d.ts에 추가해줍니다.