[25.02.20 목요일]
[MBTI 테스트 - 트러블슈팅]
리액트 심화주차 수강을 힘들게 마치고 개인과제를 셋팅하던 중에 문제가 발생!!
셋팅과정부터 문제가 발생하다니..🤦♀️
🚨 문제 발생
Tailwind CSS를 설정한 후 정상적으로 적용되었는지 확인하는 과정에서 unknown at rule @tailwind라는 경고 메시지를 확인했다. 이는 오류가 아닌 경고였기 때문에 혹시나 하는 마음에 Tailwind를 적용해 보았으나, 스타일이 정상적으로 반영되지 않았다.
팀원들에게 동일한 현상이 있었는지 확인하고, 구글링을 통해 unknown at rule @tailwind 문제를 해결했다. 해결 방법 중 하나로 PostCSS Language Support 익스텐션을 설치했으나
여전히 Tailwind가 적용되지 않았다.
1. 원인 추론
- 처음 사용하는 CSS 프레임워크이므로 설치 과정과 설정에서 오류가 발생했을 가능성이 높았다. 그래서 다시 한 번 설치 과정을 점검하고, 설정한 파일들에서 오타가 있는지 확인했다.
2. 해결 방안
package.json에 설치된 Tailwind CSS의 버전을 확인했다.
- 버전은 발제에서 제시한 버전과 같았다.tailwind.config.js파일과postcss.config.js파일의 설정을 점검했다.main.jsx에서index.css가 올바르게 import되었는지 확인했다.
- 모든 항목을 점검하고 다시 import까지 확인했으나 문제는 해결되지 않았다.
3. 결과
결국 강의에서 제공한 코드를 그대로 복사하여 붙여넣었더니 정상적으로 작동했다.
"왜 갑자기 되는 거지?" 하고 깃(Git) 변경 사항을 확인해 보니, tailwind.config.js 파일에서 파일명 앞뒤의 공백 차이가 문제였다.
// 문제 발생 코드
content: [" ./src/**/*.{js, jsx,ts,tsx} "]
// 정상 작동 코드
content: ["./src/**/*.{js,jsx,ts,tsx}"]| 문제 발생 코드 | 정상 작동 코드 |
|---|---|
 |  |
🪄 공백을 제거한 후 Dev 서버를 다시 실행하니 매우 정상적으로 작동하는 것을 확인했다.
Config 파일 내 공백이 이렇게 큰 영향을 미칠 줄은 몰랐다! 튜터님들조차 새롭게 알게 된 사실이었다.
느낀 점
해당 부분은 Prettier에서도 자동으로 수정되지 않는 영역이었다. 파일을 점검하는 과정에서 나도 모르게 공백을 입력했을 가능성이 높았다.
Tailwind가 적용되지 않는 원인을 찾겠다고 여러 개의 config 파일을 열어둔 채 다른 작업을 진행하면서, 키보드를 실수로 눌러 의미 없는 글자가 입력되었고, 그로 인해 추가적인 오류 메시지를 마주치기도 했기 때문이다.
Config 파일을 수정하거나 확인할 때는 반드시 원본을 저장하거나, 가급적 건드리지 않는 것이 중요하다...! 😭
