문제
React + vite 프로젝트에 Tailwind CSS를 적용하려고 하는데 적용이 안되는 Pre-transform error: Cannot apply unknown utility class 오류가 발생했다 ㅠㅠ
원인은 저 문장처럼 알 수 없는 유틸리티(테일원드)를 사용할 수 없다는 것이었고 바로 공식 사이트에 들어가봤다.
첫번째 시도 - 공식 문서 살펴보기
https://tailwindcss.com/docs/installation/using-vite
알고보니 최근에 vite에 테일원드를 적용하는 방식이 바뀌었고
나와있는데로 똑같이 따라했으나 결과는 여전히 되지 않았다 ㅠㅠ
삭제 후 재설치 이런것도 당연히 해봄
두번째 시도 - 구글링 (해결)
구글링을 해보니 역시 나와 같이 오류를 겪은 사람이 정말 많았고
https://github.com/tailwindlabs/tailwindcss/issues/15778
이곳에서 문제를 해결 할 수 있었다!!
테일원드를 외부 스타일 시트 방식으로 적용하기 위해서는
@import 'tailwindcss';
.container {
@apply max-w-[77.50rem] my-0 m-auto pt-40 pb-20 box-border;
}
이런식으로 앞에 @apply 를 붙여줘야 한다.
그런데 알고보니 Tailwind CSS를 사용하기 위해서는
@tailwind base;
@tailwind components;
@tailwind utilities;
이친구들을 추가로 넣어줘야 한다고 한다!!
- @tailwind base;: 기본 스타일을 추가
- @tailwind components;: UI 컴포넌트 스타일을 추가
- @tailwind utilities;: 유틸리티 클래스를 추가
참고로 각각 이런 역할을 한다고 한다.
@import 'tailwindcss';
/* 추가한 것들 */
@tailwind base;
@tailwind components;
@tailwind utilities;
.container {
@apply max-w-[77.50rem] my-0 m-auto pt-40 pb-20 box-border;
}
저친구들을 넣어줬더니 오류가 해결되고 테일원드가 잘적용되었다 ㅎㅎ
🤔후기
예성치 못한 곳에서 오류가 터져 당황했으나
결국 오류를 해결하여 기분이 좋당 ㅎㅎ
생각보다 해결하는데 오래 걸리긴 했지만
해결과정에서 몰랐던 테일원드에 대해서도 알게 되고
얻어가는 게 있던 트러블 슈팅이었다.
