[RN] React Native에서도 TailwindCSS를 쉽게 사용하는 방법

# NativeWind 라이브러리를 이용해서 TailwindCSS를 쉽게 적용하는 방법 소개

- 최근 개발하고 있는 모든 웹 프로젝트에서 스타일링에는 TailwindCSS를 사용하고 있습니다. 그런데 얼마전 React Native로 개발할 일이 생겼습니다. 문제는 이미 Tailwind에 중독된(?) 몸이었기 때문에, 어떻게든 Tailwind를 사용하고 싶었습니다. 다행히도 RN에서 Tailwind를 사용할 수 있게 도와주는 라이브러리를 찾아냈습니다. tailwind-rn, nativewind 정도가 눈에 들어왔고, 검토 결과 nativewind를 사용하기로 하였습니다. 본 포스팅에서는 nativewind의 설치 및 적용 방법을 설명하면서, 왜 nativewind를 사용하게 되었는지도 말쓰드리려고 합니다.

# 관련 페이지

- 깃헙 저장소

https://github.com/marklawlor/nativewind

GitHub - marklawlor/nativewind: React Native utility-first universal design system - powered by Tailwind CSS

-문서 페이지

 

# 사용 방법

- 설치를 진행합니다. 참고로 TailwindCSS의 설치 방법은 본 포스팅에서는 생략합니다.

yarn add nativewind

- tailwind.config.js을 다음과 같이 수정합니다. 자신의 프로젝트 폴더 구조에 맞게 필요한 파일들이 포함되도록 아래의 값을 설정합니다. 예를 들어 "src"경로를 사용하는 경우 <custom-folder>에 src를 넣어주시면 됩니다

// tailwind.config.js

module.exports = {
  content: ["./App.{js,jsx,ts,tsx}", "./<custom-folder>/**/*.{js,jsx,ts,tsx}"], //--> 수정
  theme: {
    extend: {},
  },
  plugins: [],
}

- 그리고 babel.config.js에 아래의 플러그인을 추가해 주면 끝입니다. 이제 RN에서 tailwind를 사용하실 수 있습니다

// babel.config.js
module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: ["nativewind/babel"], // 추가
};

 

-  사용방법은 react나 다른 웹에서와 동일합니다. 아래와 같이 className에 스타일링 코드를 넣어주시면 됩니다.

export const CheckButton = (props: {onPress: (checked: boolean) => void}) => {
  const [checked, setChecked] = React.useState(false);
  return (
    <Pressable
      hitSlop={10}
      className="p-1 w-32 h-10 bg-primary text-white hover:bg-opacity-75"
      onPress={() => {
        setChecked(!checked);
        props.onPress(!checked);
      }}>
      {checked ? (
        <CheckSquare className="text-white" />
      ) : (
        <Square className="text-white" />
      )}
    </Pressable>
  );
};

 

- 위에서 말한 것처럼 react에서와 사용법이 동일한 것이 nativewind를 선택한 이유입니다. 이는 다른 라이브러러의 예제를 보시면 쉽게 이해가 되실 것입니다. 아래의 예는 tailwind-rn입니다. style안에 tailwidcss()로 감싸서 스타일링 코드를 정의해 주어야 합니다.

</view style={tailwind('bg-blue-200 px-3 py-1 rounded-full')}>

- 별거 아닌 차이처럼 느껴질 수 있지만, 코드 양이 많아질 경우에는 피로도가 크게 증가하며, react에서 사용했던 스타일이 있거나, 좋은 예제가 있어서 이를 활용하려는 경우에도 추가 수정이 필요하기 때문에, 꽤 큰 차이일 수 있습니다. 만약 특별히 tailwind-rn을 사용해야 하는 이유가 없을 경우(사실 tailwind-rn이 더 깃허 스타가 많고, 모든 기능을 비교해본 것은 아니기 때문에) nativewind를 사용하실 것을 추천드립니다.

 

---