모노레포 테일윈드 적용 안됨

이 글은 모노레포 프로젝트에 TailwindCSS를 적용하던 중 겪은 이슈에 대해 작성합니다.

개요 📃

모노레포에 관심을 가지게 되며 컴포넌트를 별도로 분리된 프로젝트에 관리하는 방식으로 개발하려고 했습니다.

프로젝트 구조는 아래와 같습니다.

packages/
  config/
    tailwind.config.ts
    postcss.config.mjs
    package.json
  types/
  ui/
    atom/
      Button/
        index.tsx
        stories.ts
    tailwind.config.ts
    package.json
webapps/
  admin/
    tailwind.config.ts
  storybook/
    tailwind.config.ts
  user/
    tailwind.config.ts
package.json
...

• packages/config: 공통적으로 사용되는 프로젝트 구성 파일을 모아둔 패키지
• packages/types: 공통적으로 사용되는 타입을 모아둔 패키지
• packages/ui: 컴포넌트 및 ui에 사용되는 것을 모아둔 패키지
• webapps/admin & webapps/user: 관리자&사용자 페이지
• webapps/storybook: 스토리북

처음에 작성했던 tailwind.config.ts는 아래와 같습니다.

// packages/config/tailwind.config.ts
import type { Config } from 'tailwindcss';

const config: Config = {
  content: [
    '../ui/**/*.{ts,tsx}',
    '../../webapps/admin/src/**/*.{ts,tsx}',
    '../../webapps/user/src/**/*.{ts,tsx}',
  ],
  theme: {
    extend: {
      // ...
    },
  },
  plugins: [],
};

export default config;

// webapps/admin/tailwind.config.ts
export { default } from '@packages/config/tailwind.config';

이렇게 작성했을 때 제가 생각한 결과는 config의 content에 작성된 컴포넌트에 스타일이 적용되어야 했는데 전혀 적용되지 않았습니다.

원인 분석 🔍

왜 적용이 되지 않았나 확인해보니 터미널에 ‘content를 찾을 수 없다.’ 라는 경고가 발생하고 있는 것을 보게 되었고, TailwindCSS는 실행되는 애플리케이션을 기준으로 content를 가져오기 때문에 위처럼 작성한다면 아무런 스타일도 적용되지 않는다는 것을 알게 되었습니다.

해결 ✅

최종적으로 저는 아래처럼 수정해 해당 이슈를 해결했습니다.

// packages/config/tailwind.config.ts
import type { Config } from 'tailwindcss';

const config: Omit<Config, 'content'> = {
  theme: {
    extend: {
      // ...
    },
  },
  plugins: [],
};

export default config;

// webapps/admin/tailwind.config.ts
import config from '@packages/config/tailwind.config';

export default {
  content: ['./**/*.{ts,tsx}'],
  ...config,
};