ReactJS Tailwind css 사용 방법

react 프로젝트에 Tailwind css 설치하는 방법과 설정 방법에 대해서 알아보자. 기본 디렉토리 구조 파악이 필요하며, CRACO와 PostCss 에 대한 기본 개념을 숙지하도록 하자.

 

 

 

디렉토리 구조

ReactJS 프로젝트 기준으로 tailwind css 를 설치하면, 기본 디렉토리 구조는 아래와 같다.

ReactJS 디렉토리 구조

 

Tailwindcss설치

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

 

CRACO 설치

npm install @craco/craco

 

 

Create React App Configuration Override 의 약어로 create-react-app을 쉽고 간편하게 설정하기 위해 구성한 레이어다. eject를 설정하지 않아도, root폴더 내 craco.config.js 파일을 추가하여 eslint, babel, postcss 등 쉽고 다양한 커스터마이징을 가능하게 할 수 있다.

 

Create-React-App은 PostCSS를 기본적으로 지원하지만, 재정의할 수 없기 때문에  Tailwind를 정상적으로 사용하려면, CRACO를 설치해야 한다.

 

출처.CRACO-github

 

 

PostCSS는 JS플러그인을 사용하여 CSS를 변환시켜주는 툴로 대표적인 CSS 전처리기 중 하나이다. CSS 모듈화를 지원하며, BEM과 같은 CSS 방법론을 사용하지 않고 효율적인 스타일 관리를 가능하게 해준다.

출처.PostCSS-github

 

package.json start / build / test 수정

npm install @craco/cra

{
  "scripts": {
  - "start": "react-scripts start",
  - "build": "react-scripts build",
  - "test": "react-scripts test",
  + "start": "craco start",
  + "build": "craco build",
  + "test": "craco test",
  "eject": "react-scripts eject"
  },
}

 

 

 

 

craco.config.js 설정

// Top directory
module.exports = {
    style: {
        postcss: {
            plugins: [
                require('tailwindcss'),
                require('autoprefixer'),
            ],
        },
    },
}

 

tailwind.config.js 생성

npx tailwindcss-cli@latest init

 

tailwind.config.js 설정

module.exports = {
  purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
    theme: {
      minWidth: {
        '0': '0',
        '1/4': '25%',
        '1/2': '50%',
        '3/4': '75%',
        'full': '100%',
      }
    },
  },
  variants: {
    extend: {
      backgroundColor: ['active'],
    },
  },
  plugins: [],
}

 

 

tailwind.config.js 설정

// tailwindcss 프레임워크 기본 설정
@tailwind base;
@tailwind components;
@tailwind utilities;


// 커스터마이징 해야하는 스타일 선언
html {
    min-height:100%;
}
body {
    width: 100%;
    height: 100vh;
    margin: 0;
    padding: 0;
}