최신 React Native 앱에 Tailwind CSS를 적용하는 방법

Expo Router와 NativeWind: 최신 React Native 앱에 Tailwind CSS를 적용하는 완벽 가이드

안녕하세요. 이번 글에서는 최신 Expo 환경에서 Expo Router와 NativeWind를 함께 사용해 Tailwind CSS의 강력한 스타일링 기능을 적용하는 방법을 단계별로 소개한다.

Expo Router는 파일 시스템 기반 라우팅을 제공하여 웹 개발과 유사한 직관적인 흐름을 만들 수 있게 해주며, NativeWind는 React Native에서 Tailwind CSS를 사용할 수 있도록 도와주는 라이브러리다. 두 도구를 함께 활용하면 개발 생산성과 스타일 관리 효율성을 동시에 높일 수 있다.

이 글에서는 Expo Router 프로젝트에 NativeWind를 적용하는 전체 과정을 친절히 설명하며, 실무에 바로 사용할 수 있도록 구성하였다.

---

시작하기 전에: 준비물

• Node.js 및 npm (또는 Yarn)
• Visual Studio Code (권장)
• React Native 및 JavaScript/TypeScript에 대한 기본적인 이해

---

1단계: Expo Router 프로젝트 생성

먼저, Expo Router 프로젝트를 생성한다. 탭 네비게이션 템플릿을 사용하면 구조가 명확해 개발이 편리하다.

npx create-expo-app@latest MyExpoRouterNativeWindApp --template tabs
cd MyExpoRouterNativeWindApp

MyExpoRouterNativeWindApp은 프로젝트에 맞는 이름으로 자유롭게 변경하면 된다.

---

2단계: NativeWind 및 의존성 설치

아래 명령어를 통해 필요한 패키지들을 설치한다.

npm install nativewind react-native-reanimated react-native-safe-area-context
npm install -D tailwindcss prettier-plugin-tailwindcss

• nativewind: 핵심 Tailwind-in-RN 라이브러리
• react-native-reanimated, react-native-safe-area-context: NativeWind를 위한 피어 의존성
• tailwindcss: Tailwind CSS 프레임워크
• prettier-plugin-tailwindcss: 클래스 정렬 포맷팅용 (선택 사항)

---

3단계: Tailwind 설정 파일 생성

Tailwind 설정 파일을 아래 명령어로 생성한다.

npx tailwindcss init

생성된 tailwind.config.js는 이후 수정한다.

---

4단계: tailwind.config.js 수정

Expo Router는 대부분의 파일이 app 디렉토리에 위치하므로, content 경로를 반드시 정확히 지정해야 한다.

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

---

5단계: Babel 설정

babel.config.js 파일에 NativeWind 관련 프리셋을 추가한다.

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

---

6단계: Metro 설정

Metro 번들러를 설정하기 위해 다음 명령어로 커스텀 파일을 생성한다.

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/global.css",
});

---

7단계: 전역 CSS 파일 생성

app/global.css 파일을 생성하고 다음 내용을 입력한다.

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

---

8단계: _layout.tsx에 CSS 파일 임포트

전역 CSS는 앱 시작 시 한 번만 불러와야 하며, 이를 위해 app/_layout.tsx 파일 상단에 다음을 추가한다.

import './global.css';

Tailwind 스타일이 전체 앱에 적용되도록 설정하는 필수 단계다.

---

9단계: 타입스크립트 지원 설정 (선택 사항)

TypeScript를 사용할 경우, nativewind-env.d.ts 파일을 루트에 생성하고 다음 한 줄을 추가한다.

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

---

10단계: 앱 실행 및 확인

설정이 모두 완료되면 다음 명령어로 앱을 실행한다.

npx expo start

스타일이 적용되지 않거나 문제가 발생할 경우 캐시를 삭제한 후 다시 실행한다.

npx expo start --clear

---

탭 네비게이션에서 NativeWind 적용 예시

탭 스타일링은 app/(tabs)/_layout.tsx 파일에서 아래와 같이 설정할 수 있다.

<Tabs
  screenOptions={{
    headerShown: false,
    tabBarActiveTintColor: '#3b82f6',
    tabBarInactiveTintColor: '#6b7280',
    tabBarStyle: {
      backgroundColor: '#f3f4f6',
      borderTopWidth: 0,
      elevation: 0,
      shadowOpacity: 0,
    },
  }}
>
  <Tabs.Screen
    name="index"
    options={{
      title: '홈',
      tabBarIcon: ({ color }) => (
        <View className="p-1 rounded-full">
          <Text className="text-xl" style={{ color }}>🏠</Text>
        </View>
      ),
      tabBarLabel: ({ focused, color }) => (
        <Text className={`text-xs ${focused ? 'font-bold' : ''}`} style={{ color }}>
          홈
        </Text>
      ),
    }}
  />
</Tabs>

---

Tailwind 클래스 적용 예시

// app/(tabs)/index.tsx
import { Text, View } from 'react-native';

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

---

이 가이드를 통해 Expo Router 프로젝트에 NativeWind를 완벽하게 적용하고, 보다 깔끔하고 생산적인 스타일링 환경을 구축할 수 있다. 앞으로 React Native 앱을 Tailwind로 빠르게 구성하고자 할 때 이 글이 도움이 되길 바란다.

행복한 코딩을 기원한다!