Nativewind

Nativewind?
react-native에서 tailwindcss를 사용할 수 있게 해주는 라이브러리

설치 및 설정

1. nativewind 설치
   npm i nativewind@2.0.11 버전을 설치한다.
   최신 v4.x버전은 현재 개발 중인 버전?이라 안정성 측면에 문제가 있어 호환되지 않고 babel에러를 보여준다.

2. tailwindcss 설치
   npm i tailwindcss@3.3.2 버전을 설치한다.
   nativewind 2.0.11 버전과의 호환성을 위해 tailwindcss 3.3.2 버전을 설치한다.

3. postcss 설치
   npm i postcss 설치
   nativewind가 postcss를 활용해 스타일을 변환하고 적용하기 때문에 설치가 필요하다.

4. tailwindcss.config.js 설정

module.exports = {
  content: [
    "./App.{js,jsx,ts,tsx}",
    "./src/{js,jsx,ts,tsx}",
  ],
  ...
}

5. babel.config.js 설정

module.exports = {
  presets: ['module:@react-native/babel-preset'],
  plugins: ['nativewind/babel'],
};

6. className 에러표시 없애기
   프로젝트 루트에 nativewind-env.d.ts 생성

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

---

참고
https://velog.io/@obb8923/.plugins-is-not-a-valid-Plugin-property
https://velog.io/@vjvl95/react-native에서-NativeWind-적용기