expo (react-native) 프로젝트에 tailwind 설정하기 (feat. NativeWind)

expo (react-native) 프로젝트에 tailwind 설정하는 방법을 알아보겠습니다.

expo는 react-native를 사용하여 모바일 앱을 개발할 수 있는 react-native 프레임워크입니다.

tailwind는 css 프레임워크로,클래스 이름을 통해 스타일을 적용할 수 있습니다.

react, next.js 등 다양한 프로젝트에 적용할 수 있습니다.

이번에는 expo 프로젝트에 tailwind를 설정하는 방법을 알아보겠습니다.

expo (react-native)에서는 tailwind를 사용하기 위해 NativeWind 라이브러리를 사용합니다.

명칭은 다르나, tailwind css와 같은 방식으로 사용할 수 있습니다.

1. expo 프로젝트 생성

먼저 expo 프로젝트를 생성합니다.

npx create-expo-app@latest .

expo는 초기 설치시 기본 template을 제공합니다.

템플릿을 제거하기 위해 다음 명령어를 실행합니다.

npm run reset-project

위 코드를 실행하면 기존 템플릿은 app-example 이동하고, 깔끔한 expo 프로젝트를 시작할 수 있습니다.

이제 NativeWind를 설치합니다.

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

react-native-reanimated와 react-native-safe-area-context는 expo 프로젝트에서 필요한 라이브러리입니다.

위의 각 라이브러리는 다음과 같은 역할을 합니다.

• react-native-reanimated: 애니메이션을 위한 라이브러리
• react-native-safe-area-context: 안전한 영역을 설정하기 위한 라이브러리

2. tailwind 설정

tailwind.config.js는 직접 파일을 생성할 수도 있지만 다음 명령어로 생성할 수 있습니다.

npx tailwindcss init

tailwind.config.js 파일을 생성하고 다음과 같이 작성합니다. (기존 내용에 덮어쓰기)

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

위 코드에서 content는 tailwind가 적용될 파일을 지정합니다.

content: ["./app/**/*.{js,jsx,ts,tsx}", "./components/**/*.{js,jsx,ts,tsx}"],

다른 폴더에 설정시 반드시 경로를 지정해야 합니다.

이제 app 폴더에 global.css 파일을 생성하고 다음과 같이 작성합니다.

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

3. babel 설정

이제 babel.config.js 파일을 생성하고 다음과 같이 작성합니다.

babel.config.js는 최상위 root에 위치해야 합니다. (즉 app 폴더와 같은 위치)

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

4. metro 설정

metro는 다음 명령어를 실행합니다.

npx expo customize metro.config.js

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" });

위 코드에 반드시 이전에 설정한 ./global.css를 지정해야 합니다.

이제 app 폴더에 _layout.tsx에서 global.css를 import 합니다.

import { Stack } from "expo-router";
import "./global.css";
 
export default function RootLayout() {
  return <Stack />;
}

이제 expo 프로젝트에 tailwind 설정이 완료되었습니다.

다음은 타입스크립트 설정을 위해 nativewind-env.d.ts 파일을 생성하고 다음과 같이 작성합니다.

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

위 코드는 tailwind css를 사용하기 위한 타입스크립트 설정입니다. ///는 타입스크립트의 트리플 슬래시 지시문으로 타입스크립트 컴파일러에 특정 파일을 참조하도록 지시합니다.

이제 expo 프로젝트에서 tailwind를 사용할 수 있습니다.

import { Text, View } from "react-native";
 
export default function Index() {
  return (
    <View className="flex-1 justify-center items-center">
      <Text className="text-5xl font-bold">Hello World!</Text>
    </View>
  );
}

위 코드와 같이 tailwind 클래스를 사용하여 스타일을 적용할 수 있습니다.

이제 expo 프로젝트에서 tailwind를 사용할 수 있습니다.

이제 expo 프로젝트에 tailwind를 설정하는 방법을 알아보았습니다.

참고