EXPO에서

설치

yarn add nativewind@2.0.11 react-native-reanimated@3.10.1 tailwindcss@3.3.2

nativewind 는 2.0.11 버전,
react-native-reanimated 는 3.10.1 버전,
tailwindcss 는 3.3.2 버전으로 받아야한다.
그 이상의 버전을 사용하면 에러가 난다.

파일 설정

npx tailwindcss init

을 통해 tailwind.config.js생성,그리고 아래와 같이 수정한다.

//tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./App.{js,jsx,ts,tsx}", "./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

바벨 설정도 한다.

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

타입스크립트 사용을 위한 파일도 작성한다.

//nativewind-env.d.ts
/// <reference types="nativewind/types" />

nativewind-env.d.ts 파일을 생성해서 다음과 같이 써주면 classname을 사용해도 에러가 나지 않는다.

ReactNativeCLI에서

EXPO랑 똑같은데 바벨 설정은 다르게 한다.

//babel.config.js
module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['module:@react-native/babel-preset'],
    plugins: ["nativewind/babel"],
  };
};