Tailwind CSS Tree-Shaking Causes Missing Styles in Remote Micro-Frontend Apps

[huanhust1998]

🐛 Bug: Missing Styles in Remote Micro-Frontend Due to Tailwind Tree-Shaking

Context / Setup

We are using a Micro-Frontend Architecture (using Vite Module Federation) where a main Shell Application loads several Remote Applications.
Both the Shell and the Remote Applications are utilizing Tailwind CSS for styling.

The Problem

When the project is built (especially in production mode), Tailwind's Tree-Shaking logic is executed in the Shell App.

The Shell App only includes and bundles the CSS rules for the Tailwind classes that are explicitly used within the Shell App itself.
When a Remote Application is loaded into the Shell App at runtime, the Remote App might contain Tailwind classes that were not used by the Shell App.
Since those unused classes' styles were "shaken out" (removed) from the initial CSS bundle of the Shell App, the corresponding styles for the Remote App's components are missing or incorrectly applied, leading to a broken or unstyled UI in the Remote App.
This issue effectively breaks the styling isolation and composition needed for a robust Micro-Frontend setup with Tailwind.

Example Scenario

Shell App uses bg-blue-500 and text-lg.
Remote App uses bg-red-600 and p-4.
The Shell's built CSS bundle only contains styles for bg-blue-500 and text-lg.
When the Remote App loads, styles for bg-red-600 and p-4 are unavailable, resulting in incorrect rendering.
Possible Solutions / Desired Outcome
We need a strategy to ensure that all necessary Tailwind utility classes used across all micro-frontends (Shell and Remotes) are included in the final CSS bundle, or to configure the build process so that each remote app correctly brings its required styles without conflict.

Has anyone encountered this specific tree-shaking issue with Tailwind in a Module Federation/Micro-Frontend environment?
What is the recommended approach to configure purge/content (or equivalent) in Tailwind across a modular setup?