tailwind css가 dev, prod에 올리면 적용되지 않아요

문제 상황

- tailwind css 공식문서에서 하라는 대로 했지만, tailwind가 적용되지 않아 브라우저에서 보면 스타일이 다 깨져있다.

참고) 나의 개발 환경은...

- vite, react, typescript, scss 를 사용하고 있다. (sass를 tailwind로 교체 중)

- local 은 vite를 사용해 테스트하고, dev, prod 는 express 서버를 이용한다.

- ci 는 jenkins, docker 파일을 이용해 구현되어 있으며, install 과 build가 분리되어 있으며, 서버를 내리지 않고 container 교체 방식으로 진행된다.

 

 

우선 어디가 문제인지 보자
⬇️결론은 맨 아래 ⬇️

 

 

왜 스타일이 깨질까? 생각해 아래와 같은 가설을 만들었다.

[가설 1] tailwind install이 안되어 있다.

[가설 2] tailwind로 사용할 className 선언부가 적힌 css 파일이 없다.

[가설 3] css 파일이 최신 버전이 아니다. 

 

 

[가설 1] tailwind install이 안되어 있다. ---> ✖️

우선 package.json 파일을 확인했다

package.json 파일에 tailwindcss, postcss, autoprefixer 세가지 모두 devDependencies에 잘 적혀있었다.

 

❓ 근데 왜 devDependencies에 적혀있지? (참고 문서) 

: tailwind 설치할 때 tailwind index.css 파일을 compile 해서 output.css 파일을 만들어 import 하도록 공식 문서에 적혀있다.

output.css 으로 tailwind에서 사용하는 className을 모두 선언해 import 했기에, tailwind가 설치되지 않은 환경에서도 정상적으로 동작하는 것이 정상이다.

 

➡️ 따라서 dev/prod 환경에는 tailwind가 설치될 필요가 없기에, 이건 원인이 될 수 없다. PASS!

 

 

[가설 2] tailwind로 사용할 className 선언부가 적힌 css 파일이 없다.  ---> ✖️

직접 서버에 접근해 파일이 있나? 찾아봤다.

UI build 된 파일들을 보고 싶다. build가 제대로 안되었거나 파일이 캐싱되었거나 아무튼 파일이 문제인 것 같다.라고 제보했고 권한을 받아 직접 서버 접근해서 찾아보니 파일이 잘 있었다.

 

 

 

[가설 3] css 파일이 최신 버전이 아니다.    ---> ⭕

ㄱ. build script 변경

 

tailwind-output.css 파일을 직접 비교해보니, 로컬에 있는 파일과 dev/prod에 배포되어 있는 파일의 내용물이 달랐다.

(서버에 있는 tailwind-output.css 파일은 100줄이 채 안되어서 다르다는 것을 금방 인지할 수 있었다.)

 

나는 아래와 같은 Dockerfile로 배포 중이라는 것을 알아냈고, 

FROM 블라블라블라

ARG ACTIVE_PROFILE=prod

ENV PROFILE=${ACTIVE_PROFILE}

WORKDIR /app

COPY ./src /app/src

RUN yarn build --force --mode ${PROFILE}

ENTRYPOINT exec node ./renderServer.cjs ${PROFILE}

 

package.json의 build script를 변경했다.

 - 변경 전 : "build": "tsc && vite build", 

 - 변경 후 : "build": "npx tailwindcss -i ./src/tailwind.css -o ./src/tailwind-output.css && tsc && vite build", 

 

두근 거리는 마음으로 dev를 확인했는데, 여전히 스타일이 깨졌다... 

생각해보니 서버쪽 설정이 어찌되어 있는지 모르지만, tailwindcss가 dev에도 설치되어 있지 않다면 output 파일을 제대로 만들어내지 못할 것 같았다. 다시 서버 파일과 로컬 파일을 비교하니 역시나 여전히 동일한 내용이 아니였다.

 

우선 build script를 롤백하고 tailwind.css 파일이 변경될 때마다, 내가 다시 말아서 commit 하는 것으로 일단락 지었다.

 

 

ㄴ. css import 정리 ------> ⭕나의 해결책

사실 이쯤 왔을 때는 좀 감이 안잡혀서 난감했다.

그러다가 tailwind 공식문서를 찬찬히 뜯어보다가 이런 글을 발견했다.

 

100% 연관되어 있는 글은 아니지만, 갑자기 내 프로젝트 PrimeReact lib 가 설치되어 있다는 것이 생각났고,

관련 css 파일 import 가 어떻게 되어 있는지 확인해보았다.

tailwind 설치할 때도, primereact를 얼기설기 엉망으로 사용하고 있어 tailwind가 제대로 작동하지 않았기에,

일부 css 파일을 주석처리하고 깨지는 부분을 따로 처리해주고 있었다.

 

혹시.. tailwind-output.css 파일을 만들 때 저 파일들 내부에 선언된 내용과 충돌이 날 수 있나?

(로그 상으로 확인했을 때는 이런 거 하나 안떴지만, 이땐 뭐라도 의심해보고 있었다.)

 

PrimeReact docs에서 tailwind를 검색해보니 요런 글이 나왔고, 바로 작업해보았다.

 

아이콘 관련 css 파일은 옮기니, 로컬에서도 제대로 동작하지 않아서 우선 가만히 두었고,

나머지 두개의 primereact용 css import 를 tailwind.css 파일로 옮겼다. 

 

이렇게 하고 tailwind css 를 다시 말고("css": "npx tailwindcss -i ./src/styles/tailwind.css -o ./src/styles/tailwind-output.css"), dev에 올려보니 해결되었다!!!

 

결론 : ui lib의 css import 방식이 tailwind-output.css 파일을 생성하는 데에 영향을 미친다.