react native 에서 tailwind css 사용하기

 

1. 아래 3개의 라이브러리를 설치 

    npm install -D tailwindcss postcss autoprefixer

 

 

2. tailwind.config.js  postcss.config.js 파일 생성

    npx tailwindcss init -p

 

 

3. tailwind.config.js 수정

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

module.exports = {

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

  theme: {

    extend: {},

  },

  plugins: [],

}

 

4. src 폴더 내에 input.css 파일에 아래 3줄을 추가 (없으면 생성)

@tailwind base;

@tailwind components;

@tailwind utilities;

 

5. babel.config.js에 아래 플러그인 추가

module.exports = {

  presets: ['module:metro-react-native-babel-preset'],

  plugins: ["nativewind/babel"], // 추가

};

6. Start the tailwind CLI build process

   npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

 

 

7. 아래와 같은 에러 발생 시 tailwindcss의 버전을 3.3.2로 사용 한다.

Getting Error: "Use process(css).then(cb) to work with async plugins"

npm install tailwindcss@3.3.2 --save-dev