React tailwind 설정 세팅 및 활용 방법

프로젝트를 맡아 진행하게 되었는데, 프로젝트 요구사항에서 모바일과 PC 둘 다 화면이 잘 나오도록 보여질 수 있게

반응형 웹사이트로 만들어야 하는 요청을 받았다.

 

그래서 그런 것에 최적화 된 css 프레임워크, 라이브러리를 연구해보다가.

예전 프로젝트에서 tailwind를 사용했을 때,  sm: lg: xl: 이런 형식으로 tailwind 자체에서 모바일 / 웹 사이즈를 지정해서 반응형으로 예쁘게 처리해주었던 것이 기억이 났다. (물론 사이즈는 개발자가 지정할 수도 있다. 나 역시 모든 모바일의 사이즈를 맞추어야 하기 때문에 tailwind에서 제공하는 sm은 사용하지 않고, 직접 사이즈를 지정해서 작은 화면의 모바일 웹을 처리해주었다.)

 

아무튼, 그러한 이유로 요즘 css 프레임워크에서 가장 핫하게 뜨고 있는 tailwind를 적용해보기로 하였다.

 

초기 설정

create react app으로 react 프로젝트가 미리 설정되어 있다는 가정 하에, tailwind를 적용하는 방법은

 yarn add -D tailwindcss postcss autoprefixer postcss-cli npm-run-all
 혹은
 npm install -D tailwindcss postcss autoprefixer postcss-cli npm-run-all

이렇게, 패키지를 개발 종속성으로 설정해준다.

 

그 후 src 폴더 생성 후 style (css 파일들을 이 안으로 저장함.) 폴더 안에 tailwind.css 파일을 만들어준다.

파일 안에는

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

.font-sans-kr {
  font-family: "NanumSquare", sans-serif;
}

.calcWidth {
  width: calc(100% - 16rem);
}

@media (min-width: 100px) {
  .small\:hidden {
    display: none;
  }
  .small\:flex {
    display: flex;
  }
}

이런식으로 만들어주면 되는데, 초기 설정에서 가장 필요한 것은 아래의 이것만 넣으면 된다.

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

나는 폰트를 지정해서 여러곳에서 사용하고 싶기 때문에 이렇게 만들어주었고,

tailwind에서 제공하지 않고 내가 직접 사이즈를 지정해주어야 하거나, 작은 화면의 모바일 사이즈를 지정해주거나

할 때 tailwind.css 파일에서 적용하면 된다. 

 

그러면 우리가 tailwind 코드를 작성할 때마다 app.css 파일이 생성이 되며 tailwind가 작동된다.

 

tailwind를 사용하려면, postcss도 사용해야 하는데 이건 그냥 babel 같은 css 전처리기라고 생각하면 된다.

 

프로젝트 상위에 (맨 위 루트 폴더) postcss.config.js를 만들고 postcss에 대한 환경설정을 해준다.

const path = require("path");
module.exports = {
  plugins: {
    tailwindcss: {
      config: path.join(__dirname, "tailwind.config.js"),
    },
    autoprefixer: {},
  },
};

상위폴더에 우리가 사용하려는 tailwind도 tailwind.config.js를 만들어서 환경설정을 해주자.

module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
};

이렇게 src 파일 안에 있는 js jsx ts tsx 파일을 tailwind를 사용할 것이라고 명시해준다.

 

그리고 react에서 index.js에 

import './index.css'; << 삭제
import './styles/app.css'; << 추가

이렇게 css를 바꾸어준다.

 

그리고 마지막으로 app.js에서 import 되어있는 app css를 삭제해준다. 

import './App.css'; << 삭제

 

그 후 package.json에서 

 "scripts": {
    "build:css": "postcss src/styles/tailwind.css -o src/styles/app.css",
    "watch:css": "postcss src/styles/tailwind.css -o src/styles/app.css --watch",
    "react-scripts:start": "react-scripts start",
    "start": "run-p watch:css react-scripts:start",
    "build": "run-s build:css react-scripts:build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

이렇게 설정을 해준다. ( 오류가 난다면 라이브러리가 존재하지 않아서 일테니, 당황하지말고 npm install 로 오류가 난 라이브러리를 다운받아준다. )

 

그 후 yarn start 를 터미널에 입력하면, 생성한 styles 폴더에 app.css 파일이 생성되어있을 것이다.