Turborepo 환경에서 CSS 누락 문제 해결기

Turborepo 환경에서 공통 컴포넌트를 packages로 분리해 사용하다가 TailwindCSS가 적용되지 않는 문제를 겪었다.

당시에는 프로젝트를 빨리 만들어야 했기 때문에 넘어갔지만 최근에 시간이 생겨서 packages로 옮기는 리팩토링을 하면서 에러도 해결해보았다.

문제 상황

공통 UI 컴포넌트를 재사용하기 위해 디렉토리를 다음과 같이 구성했다.

apps
|_extension // 크롬 익스텐션
|_web // 웹
packages
|_components
|__src
|___index.ts
|___button
|____index.tsx
...

그리고 apps/web에서 packages/components의 버튼을 가져다 사용했는데, 결과는 다음과 같았다.

버튼에 className은 정상적으로 들어갔으나 실제 렌더링된 CSS에는 일부 스타일이 누락되었다.

sources 탭을 확인해보았더니 css 파일에 정의해둔 custom variable이 들어가있지 않았던 것이다. 아래 사진을 보면 .text-primary-foreground가 없는 것을 확인할 수 있다.

원인 분석

TailwindCSS는 빌드 타임에 사용된 클래스만 추출해 최종 CSS를 만든다.

Tailwind works by scanning your project for utility classes, then generating all of the necessary CSS based on the classes you’ve actually used.
출처: https://tailwindcss.com/docs/detecting-classes-in-source-files#overview

문제는 TailwindCSS가 packages/components를 스캔 대상으로 포함하지 않아서 스타일이 적용되지 않았다는 것이다. 따라서 해당 디렉토리 안의 클래스는 빌드 시 감지되지 않았다.

해결 과정

TailwindCSS 공식 문서에 따르면, 외부 라이브러리나 패키지 경로를 직접 지정해 스캔할 수 있다.

이를 위해 globals.css에 다음과 같이 @source 지시어를 추가했다.

@source "../../../../packages/components";

이후 다시 빌드해보니, 누락되었던 유틸리티 클래스와 변수들이 정상적으로 포함되었다.

마무리하며

해결 자체는 단순했지만 원인을 파악하기까지 시간이 많이 걸렸다. 그래도 오랫동안 해결하지 못했던 문제를 끝내 해결해서 기분은 좋았다.

참고

• Detecting classes in source files