[EXPO] NativeWind 사용해보기 (expo 전용 tailwind)

seoleem Lee·2025년 5월 30일

CSS Expo NativeWind tailwind

[EXPO(React-native)] 실습 및 프로젝트

목록 보기

16/19

NativeWind란?

Tailwind CSS의 유틸리티 클래스를 React Native에서 사용할 수 있게 해주는 라이브러리.

Tailwind 문법을 Expo에서도 사용 가능하게 해준다.

설치하기

NativeWind 공식 문서

공식 문서에 따라 설치를 진행해볼 예정이다.

expo 프로젝트가 세팅 되어있다는 가정 하에 진행한다.

1. Nativewind 설치

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

먼저, 다음 명령어를 통해 NativeWind를 설치하자.

참고로 NativeWind는 두 라이브러리의 종속성을 요구한다.

react-native-reanimated
react-native-safe-area-context

(해당 라이브러리의 경우, expo 프로젝트 설치 시 같이 설치되니 참고.)

2. Tailwind CSS 설정

설치를 마쳤다면, tailwind.config.js 설정을 위해 다음 명령어로 생성한다.

npx tailwindcss init

(참고로 직접 생성해도 상관 없다!)

명령어 실행 시 ,

Created Tailwind CSS config file: tailwind.config.js

다음 문구와 함께 파일이 생성된 것을 확인할 수 있다.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

이제, 생성된 tailwind.config.js 파일에 모든 구성 요소 파일의 경로를 추가한다.

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

content: tailwind가 적용될 파일
presets: NativeWind에서 제공하는 기본 설정

tailwind.config.js 파일 설정을 마쳤다면, 이제 app 폴더 내에 global.css 파일을 생성한다.

그 다음에 아래와 같이 Tailwind 지침을 추가하자.

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

~~chat gpt의 말에 따르면(…) 해당 파일 설정은 웹 대응 용 이라고 한다.~~
~~만약 expo 프로젝트만 진행할 예정이라면 의미 없다고 하는데… 공식 문서에서 시키는 대로 하는 것이 안전빵 아닌가?!~~

역시 아니었다.
NativeWind v4에서는 global.css 파일을 생성하고 설정하는 것이 필수라고 한다.

필자의 경우 생성하지 않고 실행해봤을 때 전~혀 작동하지 않았다.
역시 ai 말만 듣고 행동하는 것은 옳지 않다…

3. Babel 설정 추가

이제, babel.config.js 파일에 설정을 추가해야 한다.

만약 expo 프로젝트를 세팅했다면, 해당 파일은 기본적으로 “보이지 않는 상태” 일 것이다.

따라서, 이 게시물을 참조하여 해당 파일을 꺼내오도록 하자. (^^)

겸사겸사 metro.config.js도 꺼내오자! (이 파일도 설정이 필요하다.)

파일을 확인해보면, 다음과 같은 상태일 것이다.

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

아래와 같이 설정을 추가하자.

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

4. metro.config.js 수정

앞서 겸사겸사(?) 같이 꺼내온 metro.config.js 파일도 확인해보자.

초기 파일의 경우 다음과 같은 내용일 것이다.

// Learn more https://docs.expo.io/guides/customizing-metro
const { getDefaultConfig } = require('expo/metro-config');

/** @type {import('expo/metro-config').MetroConfig} */
const config = getDefaultConfig(__dirname);

module.exports = config;

아래와 같이 설정을 추가하자.

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

5. Type 설정하기 (선택: typescript 프로젝트의 경우)

NativeWind Typescript Doc

만약 본인의 expo 프로젝트가 typescript 기반일 경우 다음과 같은 추가 설정이 필요하다.

먼저 루트 폴더 위치에 nativewind-env.d.ts 파일을 생성하자.
그리고 파일 내에 다음과 같이 작성한다.

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

마지막으로 app 폴더의 _layout.tsx에 global.css를 import 하면 설치가 완료된다!!!

import "./global.css";

6. 실행해보기

import { SafeAreaView } from "react-native-safe-area-context";
import { View, Text } from "react-native";

export default function HomeScreen() {
  return (
    <SafeAreaView>
      <View className="flex justify-center items-center">
        <Text className="text-5xl font-bold">Hello World!</Text>
      </View>
    </SafeAreaView>
  );
}