tailwind v4 가 부분적으로 적용되는 문제 해결 과정

상황

1년 동안 사용한 블로그의 리뉴얼을 단행했다.

가장 눈에 띄는 변화는 스타일 관리를 scss를 하던 기존과는 다르게, 이번 블로그에서는 tailwind를 사용하는 것이다.

tailwind 적용 후 스타일을 적용하는 것은 놀랍게 편리해졌다. 따로 스타일시트를 구분해서 관리하지 않고 컴포넌트 내에서 class 명을 통해 스타일을 적용하기 때문에 화면 전환이 없기 때문이다.

블로그를 다시 단장하면서 레포를 새로 만들기로 결정했다.

Next.js 프로젝트를 생성하면서, 옵션으로 있는 tailwind를 같이 적용했다.

기본적으로 최신 버전으로 설치하게끔 설정되어 있는지 tailwind 또한 4 버전으로 설치되었다.

별 탈 없이 마이그레이션을 진행하다가 문제가 생겼다.

갑자기 특정 페이지에서 tailwind로 적용한 스타일이 부분적으로만 적용되는 것을 확인한 것이다.

이번 포스트에서는 이 문제를 해결하는 과정을 다룬다.

문제 인식

해당 작업을 진행 중일 때, 다행히도 확인 가능한 페이지가 3 개 밖에 없어서 비교 대조가 용이했다.

# src/app 내부 디렉터리 구조
+-- [locale]
  +-- page.tsx (매인페이지)
  +-- list/[category]/page.tsx (포스트 리스트 페이지)
  +-- post/[category]/[slug]/page.tsx (포스트 상세 페이지)

[상세 페이지]를 작업 완료하고 테스트를 마쳤고, [리스트 페이지] 작업까지 마저 마친 이후 테스트 하는 과정에서 이 문제를 인식하게 되었다.

좀 전까지도 잘 작동하던 상세 페이지에서 앞서 설명했던 문제가 발생하는 것을 확인했다.

하지만 동시에 리스트 페이지는 tailwind로 적용한 스타일이 잘 적용되고 있었다.

우선 브라우저의 개발자 도구를 tailwind가 인식이 되고 있는지 확인해 보았다.

확인 결과, 리스트 페이지는 모두 잘 인식되고 있었고, 상세 페이지는 일부 tailwind 클래스가 인식이 안 되고 있었다.

그리고 해당 스타일을 리스트 페이지에서 임의로 적용해보니, 상세 페이지에 와서도 적용이 되는 것을 확인할 수 있었다.

이쯤 확인하고 보니 내가 내린 결론은, 무엇인가 tailwind의 상세 페이지를 배제하게 만드는 것 같다. 였다.

해결 방법

Automatic Content Detection

tailwind 가 4 버전으로 업데이트를 하면서 여러 기능들이 포함된 것 같다.

그 중에서는 이번 문제를 야기한 Automatic Content Detection이 포함된다.

사실 이 기능이 문제를 발생시켰다기 보다는, 본인의 무지로 인한 실수임이 더 명확한 표현이다.

이 기능은 이전처럼 어떤 파일을 tailwind로 인식해 css를 처리할 지 등록하는 과정을 간소화하고, 파일 내 작성되어 있는 tailwind 기반 class 명을 인식하여 알맞은 css를 생성한다.

특히 임의의 파일을 tailwind 에서 배제하고 싶다면 .gitignore에 해당 파일의 이름이나 패턴을 입력하면 된다.

하지만 이 조치만으로 해당 파일 내에서 생성하는 컴포넌트가 완전히 tailwind의 영역을 벗어나는 것은 아니다. 단지 해당 컴포넌트에서만 사용하는 tailwind 에 대한 css가 생성이 되지 않는 것 뿐이다.

리스트 페이지와 상세 페이지의 작업을 마치고 사실 본인은 모종의 작업을 추가해로 진행했다.

기존 컨텐츠 파일을 관리하는 디렉터리를 프로젝트의 root 폴더에 복사하고 post라는 이름을 붙여놨다.

그리고 Git에서는 해당 디렉터리를 관리하지 않게 .gitignore에 post를 집어넣은 것이다.

# .gitignore 내용
post

결과적으로 .gitignore 내 문제되는 문구를 삭제하면서 문제를 해결했다.