[React-Native] NativeWind 스타일링 미적용 문제 해결

TailWind 디자인 패턴을 RN 앱에 사용하기 위해 사용하는 라이브러리로 NativeWind가 있습니다. NativeWind를 활용한 스타일링이 적용되지 않을 때 시도할 수 있는 해결 방법들입니다.

 

캐시 삭제

NativeWind 스타일링은 각 파일의 캐쉬를 활용합니다. 바로 적용이 안되는 경우 캐쉬를 삭제한 후 다시 빌드를 시도합니다.

npx react-native start --reset-cache

 

tailwind.config.js 확인

NativeWind는 tailwind.config.js 파일을 통해 스타일링을 적용할 파일들을 확인합니다. 새로운 파일을 생성한 경우 파일을 다시 확인해 보세요.

제 경우, MainScreen 파일을 새로 만든 후 tailwind.config.js 파일에 해당 파일 위치를 명시하지 않아 스타일링이 적용되지 않았습니다. MainScreen 파일을 스타일링 목록에 아래와 같이 추가하여 해결하였습니다.

/** @type {import('tailwindcss').Config} */

module.exports = {
  content: [
    './App.{js,jsx,ts,tsx}',
    './MainScreen.{js,jsx,ts,tsx}',
    './Components/**/*.{js,jsx,ts,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

 

기타 문제는 공식 홈페이지를 참고하세요.

Troubleshooting | NativeWind