Monorepo 및 Workspace 프로젝트에서 tailwindcss 팁

tl;dr

module.exports = {
  content: {
    relative: true, // 나의 구세주여!
    files: [
      './src/**/*.{js,jsx,ts,tsx,vue,svelte,astro}',
    ],
  },
  // ...
}

그래서 이게 뭔데?

참고로 tailwindcss 프로세스에서 개발 모드나 빌드할 때, 작업 디렉토리(Working Directory)를 기준하여 작업한다.
예를 들면, 프로젝트 최상위 상태에서 tailwindcss 걸면, packages/frontend/tailwind.config.js 파일은 packages/frontend 기준으로 잡는 게 아니라 실행한 경로 기준으로 잡게 된다는 것이다.
그래서 거지같은 상황으로, 개발 모드에서는 잘 뜨다가 빌드할 때는 안뜨거나, 아니면 그 반대거나, 아예 안되거나 하는 상황이 발생한다는 거다.

대체 왜 그런 기준으로 잡았는지 모르겠지만, 다행히도 tailwindcss 는 이런 문제를 해결할 옵션을 줬다.
relative 옵션이다. 이 옵션을 true 로 설정하면, tailwind.config.js 파일을 기준하여 content 속성에서 지정한 경로를 찾아 css 클래스를 생성할 것이다.

즉, 워크스페이스나 모노레포 최상위 폴더에서 명령어를 실행한다 해도, 예를 들어 packages/frontend/tailwind.config.js config 를 잡고 실행할 경우, relative: true 설정 시 무조건 tailwind.config.js 파일이 있는 packages/frontend 경로를 기준잡고 그 안에 파일들을 뒤져서 CSS 클래스를 생성해 줄 것이다.

앗.. 아아...

그리고 이 속성은 다음 버전인 tailwindcss 4.0.0 부터는 relative: true 가 기본값이 된다고 한다...

앗.. 아아...

끗.