리서치 페이지 : tailwind 사용하기 (with. CRA 5.0.1, postcss, 버전 충돌 해결)

 

드디어 tailwind css를 써보게 되었다!!!

전에 샀던 모던 자바스크립트 리액트 책에서 실습했을 때에는 잘 되지 않았었는데,

실행에 성공해 보니까 원인을 조금은 추측해 볼 수 있었다.

 

 

잠시 공부했던 책에 대해 이야기하면,

책에서는 tailwind 동작에 필요한 postcss를 덮어쓸 수 없다는 이유로 craco를 사용했다.

 나도 같은 craco 환경에서 tailwind를 사용해 보고 싶었는데, 개발자탭 등을 확인하니 craco가 실행이 되지 않는 것 같았다.

어쩔 수 없이 postcss를 이용해서 지금은 tailwind 사용이 가능해진 상태이다.

그래도 내가 생각해본 원인을 조금 정리해 보았다. 확실한 것은 아니다.

 

 

 

tailwind가 적용되지 않은(=실행되지 않은) 이유

•  craco가 작동하지 않았다.
• CRA 5.0.1 버전이 내가 설치한 tailwind 버전과 호환이 잘 되지 않았다?

 

 

craco 미작동 문제

개발자도구 Network 탭, element 탭을 확인해봤는데, 아래의 이유들로 craco 작동이 뭔가 되지 않음을 느끼게 되었다.

그래서 craco 대신 postcss config 파일로 대체했다.

 

Network: css파일이 아무것도 뜨지 않음

Element: 내가 작성한 tailwind 클레스네임은 뜨는데 css 탭에서는 해당 스타일이 적용 확인 불가

 

 

CRA 버전 충돌 문제

아주 정확한 이야기인지는 잘 모르겠지만 CRA 5이상 버전부터는 tailwind 3 이상의 버전이 호환성에 맞다는 어느 블로그의 글을 보게 되었다. 처음에는 tailwind 공식 문서의 npm 설치 방법을 따랐는데 그 버전이 CRA5랑 잘 맞지 않는다는 것 같았다.

npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9 (공식문서)

이 문구로 인스톨을 진행했었다. 잘은 모르겠지만 일리가 있다고 생각해서 3 이상 버전을 다시 인스톨을 했다. 3.4.17로 설치했다.

아래부터는 내가 설치한 버전과 방법에 대해 소개했다.

 

 

---

 

 

 

테일윈드 설치 & 적용 방법

 

 

1. frontend cmd에서 tailwind와 postcss, autoprefixer, init 설치하기

// front 디렉토리 cmd에서

npm install -D tailwindcss@3.4.17 postcss autoprefixer

npx tailwindcss init -p                     //tailwind.config.js 만들어짐, postcss.config.js도 만들어짐

 

 

2. 만들어진 taiilwind.config.js > content에서 어떤 확장자 파일들에 적용할 것인지 작성하기

// tailwind.config.js
// 이미 이 양식으로 만들어져 있음

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],         // 안에 2문장 추가
  theme: {
    extend: {},
  },
  plugins: [],
}

 

 

 

3. postcss.config.js에서 아래 플러그인 추가하기 (버전마다 양식이 다를 수 있음, postcss: 8.5.6 기준)

// postcss.config.js

/* 
// 이게 원래 양식
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}
*/

// postcss 플러그인 추가
module.exports = {
  plugins: {
    'postcss-flexbugs-fixes': {},
    'postcss-preset-env': {
      autoprefixer: {
        flexbox: 'no-2009'
      },
      stage: 3
    },
    tailwindcss: {},
    autoprefixer: {},
  },
}

 

 

 

4. index.css에서 @tailwind 문장 3개 적어주기 (플젝에 따라 index.css가 아닐 수도 있다.)

나의 경우는 index.js > index.css > app.css > 개별 컴포넌트 css 순으로 css가 적용하게 되어 있다.

중요한 건 가장 대장이 되는 css 파일에다 작성하는 것. 따로 tailwind.css에 저장해서 import하는 방식은 에러가 생겼었다.

// index.css

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

@import "./App.css"; // tailwind가 먼저

// index.js

/* css */
import 'bootstrap/dist/css/bootstrap.min.css';
import './index.css'; << 확인(개발하던 플젝이라 이미 되어있음)
import 'react-datepicker/dist/react-datepicker.css';

// package.json
// 버전 확인
// craco는 쓰지 않지만 아직 삭제는 안 함
// CRA 5.0.1 대는 tailwind 3 이상이 좋다고 들어서 이 버전으로 인스톨


  "devDependencies": {
    "@craco/craco": "^7.0.0-alpha.9",	// 아직 삭제 안 함
    "autoprefixer": "^10.4.21",
    "postcss": "^8.5.6",
    "postcss-flexbugs-fixes": "^5.0.2", // 뒤에 나올 css 충돌 에러로 인스톨 했음
    "postcss-preset-env": "^10.3.1",    // 뒤에 나올 css 충돌 에러로 인스톨 했음
    "tailwindcss": "^3.4.17"
  }

 

 

이렇게 설정하면 잘 되었었다! 로컬환경에서는...😄💝

클라우드타입 서비스 배포에서는 에러가 생겨버렸다ㅜㅜ 아래 글을 살펴보자

 

 

---

 

 

 

 

로컬환경에서 에러


🚫 Module Error (from ./node_modules/postcss-loader/dist/cjs.js): Loading PostCSS "postcss-flexbugs-fixes" plugin failed: Cannot find module 'postcss-flexbugs-fixes'

 

 

 

처음에는 위와 같은 에러가 떠서 post-preset-env를 설치했다.

 

// frontend 디렉토리 cmd에서

npm install -D postcss-flexbugs-fixes postcss-preset-env


// package.json
// 이 두 문장이 생긴 이유!
"postcss-flexbugs-fixes": "^5.0.2", 
"postcss-preset-env": "^10.3.1",

 

 

그래서 이렇게 프리셋을 설치하니까 로컬 환경에서 해결이 되었었는데

깃허브에 푸시하고 클라우드타입에서 확인해보니까 에러가 발생한 것이다ㅠㅠ

 

 

 

 

 

클라우드타입에서 에러

🚫 cannot find postcss-preset-env modules

 

 

 

로컬 환경에서는 잘 됐는데 클라우드타입 배포환경에서는 프리셋 env 파일의 모듈을 찾을 수 없다는 경고가 계속 떴다.

 

 

 

preset이 원인일 수 있다고 해서 삭제해 보고, 의존성 재설치(node_modules)도 해봤지만 해결되지 않았다.

해결은 react-script와 preset-env의 호환되는 버전으로 맞춰서 해결했다.

 

 

 

🚫 cloudtype: cannot find postcss-preset-env modules 에러 정리

	에러 생긴 버전	에러 해결 버전
package.json 버전	react-scripts: 5.0.1 postcss:8.5.6 postcss-preset-env: 10.3.1	react-scripts: 5.0.1 postcss: 8.4.21 postcss-preset-env: 7.8.3
상황 설명	로컬 환경 이상 없음. 클라우드타입 환경 이상 있음. => cannot find postcss-preset-env modules	로컬 환경 이상 없음. 클라우드타입 환경 이상 없음.
에러 원인	내장된 react-scripts 5.0.1 과 postcss-preset-env: 10.3.1 의 버전 충돌
해결 방법	postcss-preset-env 7.8.3 으로 react-scripts와 같은 버전으로 맞춤
install 명령어	npm install -D postcss-flexbugs-fixes postcss-preset-env (최신버전)	npm install postcss-preset-env@^7.8.3 --save-dev (호환버전)
알게 된 점	버전을 맞추는 게 중요하구나!

 

확실한 것은 아니지만 postcss보다 preset-env의 버전이 더 문제였던 것 같다.

8.4.21이 8.5.6보다 더 안정성있는 버전이라고 해서 변경은 하였지만..

 

 

---

 

 

최근에 개발하고 있던 리서치 페이지도 잘 나오고 있다!!!

tailwind를 드디어 써보게 되었는데 너무너무 편하다! vue나 리액트 부트스트랩과 비슷한 느낌을 받았다.

className에 원하는 설정을 입력하기만 돼서 디자인에 무척 편리하다!

 

tailwind와 같은 것을 css 상태 관리라 불리는 것 같은데 도입하게 된 이유는

css 코드를 직접 다루면 상태관리가 어렵다는 말을 들어서다.

나는 css를 직접 만드는 것도 재밌다고 생각하는데 tailwind가 편한 점도 꽤 끌리는 것 같다.ㅋㅋ

아마 리서치 이후부터는 tailwind + react bootstrap의 조합으로 개발을 할 것 같다.