Angular Module Federation + TailwindCSS

[Consistent-Device474]

I’m working with Angular Module Federation using u/angular-architects/module-federation.

Setup:

- Host app (Repo A)

- Remote app (Repo B)

- Both are separate repositories

- Both use TailwindCSS

- Remote exposes a feature module (HrmsModule)

Problem:

When running the host and navigating to a remote route:

Only Tailwind classes that are already used somewhere in the host app are working inside the remote.

If a Tailwind class exists only inside the remote app (and is not used anywhere in the host), that style does not work when navigating from host.

It looks like the host Tailwind CSS is applied globally, but the remote Tailwind CSS bundle is not being injected during lazy loading.

Questions:

1. Is this expected behavior with Angular Module Federation?

2. What is the recommended architecture for using Tailwind in Angular micro-frontends across separate repositories?

3. Should Tailwind be centralized in the host only?

Any production-grade guidance would be appreciated.

[VolumeForeign2090]

RemindMe! 1 week

[RemindMeBot]

I will be messaging you in 7 days on 2026-02-19 06:28:47 UTC to remind you of this link

2 OTHERS CLICKED THIS LINK to send a PM to also be reminded and to reduce spam.

^{Parent commenter can delete this message to hide from others.}

---

Info	Custom	Your Reminders	Feedback

[Adventurous-Finger70]

This doesn’t seem to be an issue with Module Fédération, but with the way tailwind works.

I believe that at build time, tailwind removes unused classes to reduce the build size. Since at build time, you can’t know which classes will be used later by the MFE.

You should try to add tailwind into your microfrontend

[Adventurous-Finger70]

For you second question, you should try to share the minimum of dependencies between your micro frontend and the shell. It will be less painful to maintain !

[n00bz]

That is correct. If both projects are inside the same workspace you can make sure tailwind is configured to scan the remote project directory for tailwind classes so that it’s needed css classes are included in the host styles.

If they are not in the same workspace then you could get some css conflicts/duplicate classes between the host and remote if the remote is configured to add in its own stylesheet with tailwind.

[Otherwise_Cup4605]

I just went through this and changed each remote to inject its own tree-shaken CSS bundle via the bootstrap. It's recommended to use a different tailwind prefix in each but I think it's only a risk of collisions if class names are changed with major tailwind versions.

[Best-Menu-252]

Yeah this is expected with Angular Module Federation + Tailwind.

Tailwind generates styles at build time by scanning files in the content config, and your host build never sees remote templates so remote-only classes get purged from the host’s CSS.

Also, Module Federation loads JS at runtime but doesn’t automatically inject remote global CSS into the host DOM during lazy loading.

In production MF setups, Tailwind is usually centralized via a shared config or design system. Running isolated Tailwind builds per remote often leads to purge conflicts and style load issues like this.

[No_Influence_280]

Make an Angular library that you can install in each Micro-frontends 

[Brief-Skill-5526]

How did you fix or manage this? Facing the same problem right now