Micro Frontend 환경에서 Tailwind CSS 설정 오류를 해결하는 최적의 전략

Context

Micro Frontend Monorepo에서 표준 React 앱 방식으로 Tailwind CSS 설정 시 빌드 오류 발생. 각 MFE가 독립적인 Webpack 빌드 프로세스를 가지는 구조적 특징. 루트 레벨의 단일 tailwind.config.js 파일은 하위 앱에서 인식 불가한 한계.

Technical Solution

• npm workspaces를 활용한 루트 및 개별 앱 단위의 의존성 분리 설치 전략
• Host와 Remote MFE의 스캔 범위 차이를 반영한 개별 tailwind.config.js 설정
• MiniCssExtractPlugin, css-loader, postcss-loader 순의 3단계 Loader 체인 구성
• Build-time 처리 방식의 특성을 고려하여 Module Federation을 통한 CSS 공유 배제
• 중복 설정을 방지하고 테마 일관성을 유지하는 Shared Tailwind Presets 도입
• 스타일 충돌 방지를 위한 CSS Prefix 적용 및 격리 설계

Key Takeaway

빌드 타임에 동작하는 PostCSS 플러그인은 런타임으로 공유되는 Module Federation 구조와 독립적으로 동작해야 함. 분산된 빌드 환경에서는 설정 파일의 가시성(Visibility)과 컨텐츠 스캔 경로의 정확한 정의가 필수적임.