Micro Frontend Monorepo에서 Tailwind CSS — 설정 가이드

Source: Dev.to

// Production build output:
// styles.css — 0 classes generated
// ERROR: @tailwind directives treated as plain text

이 현상은 마이크로‑프론트엔드 모노레포에서 Tailwind CSS를 일반 React 앱과 동일하게 설정했을 때 발생합니다. 그런 식으로는 동작하지 않습니다.

각 MFE는 독립적인 Webpack 빌드입니다. Tailwind는 postcss-loader 내부에서 빌드 시 실행되는 PostCSS 플러그인입니다. 루트 레벨에 하나만 있는 tailwind.config.js는 apps/products/ 안에 있는 앱들에 의해 해결되지 않습니다 — 각 앱마다 자체 설정 파일이 필요합니다.

콘텐츠 경로도 호스트와 원격 MFE마다 다릅니다:

• Host는 ./src/**, ./public/**, 그리고 ./index.html을 스캔합니다.
• Remotes는 ./src/**와 ./src/index.html만 스캔합니다. 원격 앱은 런타임에 호스트에 로드되기 때문입니다.

가이드에서 다루는 내용

• 단계별 설치 – npm workspaces를 이용한 루트 + 앱별 의존성 관리
• 앱별 tailwind.config.js – 호스트와 원격의 콘텐츠 경로 차이
• PostCSS + Webpack 연동 – 3단계 로더 체인 (MiniCssExtractPlugin → css-loader → postcss-loader)
• CSS가 Module Federation을 통해 공유되지 않는 이유 – 빌드 시점 vs 런타임
• 공유 Tailwind 프리셋 – 설정을 중복하지 않고 일관된 테마 적용
• 프리픽스를 이용한 CSS 격리 – 언제, 왜 사용해야 하는지
• 자주 발생하는 5가지 실수 – 잘못된 콘텐츠 경로, 루트 레벨 설정 파일, postcss-loader 누락 등

실제 프로덕션 모노레포에서 코드 예시와 함께 전체 가이드를 확인하세요:

https://blog.srinudesetti.in/micro-frontend/react/tailwind-css-micro-frontend-monorepo