[React+Tailwind] 프로젝트 초기 설정 window

React프로젝트에 Tailwind를 사용하기 위해 초기 세팅하기

1. 리액트 프로젝트 생성

먼저 리액트 프로젝트를 생성합니다.

npx create-react-app React-Tailwind-App

2. tailwind 설치

npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^8 autoprefixer@^9

3. craco 설치

npm install @craco/craco

4. package.json 변경

package.json에서 scripts 부분을 변경한다.

//경로:react-tailwind-app/package.json
{
  ...
      "scripts": {
        "start": "craco start",
        "build": "craco build",
        "test": "craco test",
        "eject": "react-scripts eject"
      },
  ...
  }

5. craco.config.js 생성

app안에 직접 생성해야 합니다.

//경로:react-tailwind-app/craco.config.js
module.exports = {
    style: {
      postOptions: {
        plugins: [
          require('tailwindcss'),
          require('autoprefixer'),
        ],
      },
    },
  }

6. tailwind.config.js 생성

npx tailwindcss-cli@latest init

7. CSS파일에 tailwind 추가

/react-tailwind-app/src/index.css 파일에 추가

@tailwind base;
@tailwind components;
@tailwind utilities;