[트러블 슈팅] 배포 환경에서 tailwind css가 적용되지 않던 이슈 (Next 14, Vercel 배포)

🚀 개요

Next 14 앱 라우팅 방식 + tailwind CSS 를 사용한 프로젝트에서 개발(로컬) 환경에서는 tailwind css가 문제 없이 잘 적용됐으나, Vercel 배포 환경에서는 tailwind css의 스타일이 부분적으로 적용되지 않았습니다. 처음엔 팀원과 단순 next 14의 문제로 치부해 다운그레이드 시 해결 될 줄 알았으나, 다운그레이드에도 해결되지 않아 디버깅을 통해 찾아냈습니다.

😵 문제 발생

Vercel 배포 환경에서 tailwind CSS가 부분적으로 적용 됐습니다. 'cursor-pointer ' 속성은 적용이 됐으나, `list-none` 속성은 적용이 되지 않았습니다. 

 

😛 해결 방법

app 라우팅 방식을 사용하다 보니 루트 프로젝트에 app, Components 디렉토리를 둬서 src 파일을 관리했습니다. 

/* 프로젝트 디렉토리 구조 */
├─app
│  ├─chat
│  │  └─[id]
│  ├─chatProfile
│  │  └─[id]
...
├─Components
│  ├─Open
│  │  ├─ChatDivder
│  │  ├─ChatGenerator
│  │  │  └─ChatGeneratorMenu
...

 

 

	/* tailwind.config.ts */
    content: [
		'./pages/**/*.{js,ts,jsx,tsx,mdx}',
		'./Components/**/*.{js,ts,jsx,tsx,mdx}',
		'./app/**/*.{js,ts,jsx,tsx,mdx}',
		'./node_modules/@material-tailwind/react/components/**/*.{js,ts,jsx,tsx}',
		'./node_modules/@material-tailwind/react/theme/components/**/*.{js,ts,jsx,tsx}',
	],

 

하지만 tailwind.config.ts 파일을 확인해보니 Components가 아니라 components로 tailwindcss 파일의 content 속성에서 저희 프로젝트 폴더 경로에 오타가 있었습니다. 그러다보니 pages 폴더, app 폴더의 파일은 tailwind css 속성이 적용됐으나, 폴더 경로에 오타가 있던 Components 폴더의 tailwind css 속성이 적용되지 않았습니다. 폴더 경로를 바로 잡아 해결했습니다.

 

🧐 문제 해결 시도

1️⃣ tailwind.config.ts 파일을 확인

먼저 확인은 하고 비교했으나 오타를 발견하지 못했고, 개발 환경에서 tailwind css가 적용이 잘 돼서 문제가 있었을 것이라고 예상을 못했습니다.

 

2️⃣ 배포환경에서 빌드된 css 파일을 확인 

브라우저 상 'list-none` 속성이 적용되지 않길래, 네트워크 탭에서 CSS 속성을 확인해 봤습니다. 압축된 CSS 파일에서 list-none에 대응되는 'list-style-type:none' 속성이 없는 것을 확인했습니다. 또한 압축된 CSS 파일 상단에 tailwind CSS 3.5.5버젼이 적혀있음을 확인했습니다.

 

3️⃣Tailwindcss에서 배포, 빌드 시에 압축을 한다는 것을 알게 됨

tailwind css는 배포시에 자체적으로 압축하여 사용한 속성 값들만 css파일로 옮겨서 용량을 줄인다는 것을 다음 이슈들로 알게 됐습니다. 그러다보니 동적으로 tailwind 스타일을 줄 경우 css 빌더가 속성을 못 읽어 purge safelist 속성이나 소스코드에 명시를 해야한다고 합니다.

 

 

https://tailwindcss.com/docs/optimizing-for-production#writing-purgeable-html

Optimizing for Production - Tailwind CSS

https://stackoverflow.com/questions/60528893/tailwind-css-styling-not-being-applied-on-deploy

Tailwind CSS styling not being applied on deploy

 

4️⃣부분적으로 우리 소스코드중 일부가 누락 됐을 것으로 예상

next.config 속성을 살펴보아 앞서 설명했듯이 Component 폴더 내의 파일들의 css 속성이, tailwind css 빌드시에 누락됐는 것을 확인했습니다. 

 

 

💡새롭게 알게 된 것

tailwind css는 개발 환경과 배포(빌드) 환경에서의 작동 방식이 다른 것을 알게 됐습니다

개발 환경에서 동작이 잘 되길래 tailwind.config.ts 에서의 오류가 있을 것으로 예상을 못했습니다.

 

tailwind.css는 개발 환경에서는 global.css(next js기준)에서 import 해와서 사용하는 방식이다 보니 tailwind.config.ts에서 유효 파일 범위에 포함되지 않아도 적용이 됐습니다. 하지만 배포(빌드) 환경에서는 tailwind.config.ts 파일의 유효 파일 범위 내의 파일들에서 사용한 css 속성만 .css파일로 압축해서 사용하게 되는 것을 알게 됐습니다. 

 

다음번엔 또 오탈자나 config 속성 범위를 잘 살펴보는 습관을 가져야겠습니다.

 

참조

마감시간에 쪼들려 초인적인 힘을 발휘한 본인