Setup for Tailwind 3

[AntoineJOULIA]

Basic setup for using Tailwind CSS v3.0.11 (latest), only configured for React (.tsx and .jsx files). tailwind.conf.js can be completed to work with other file types.

The problem is now that a Tailwind class from a remote module is only recognized if already used in the "home module" (i.e. the one that is using the remote component) :

If I use the "bg-sky-500" class in , it disappears from the DOM of using (the class does not even appear in the inspector).
No problem if "bg-sky-500" is used directly in

[jherr]

Really torn on what to do with this one. Maybe twin-macro is the way to go since it turns tailwind into CSS-in-JS? Because as it is, it's basically unusable, since the host app has no way of knowing what the MFEs need.

[slevisp]

@AntoineJOULIA I think this problem because the file you exposed will be only that file content.
What I tried is import tailwind css into exposed file.
for example index.scss
@tailwind base;
@tailwind components;
@tailwind utilities;
I just import it into my exposed file. And also extension of tailwindcss also applied.

[akshay-nm]

Hey guys, I stumbled upon this after a week-long deep-ish dive into MFEs.
It could be a great video tutorial @jherr "How to manage styles for MFEs". 😉

Just a general question, is it better to keep stylesheets in MFEs or to have one giant stylesheet in a separate federated module?

[CosmeValera]

Hey guys, I stumbled upon this after a week-long deep-ish dive into MFEs. It could be a great video tutorial @jherr "How to manage styles for MFEs". 😉

Just a general question, is it better to keep stylesheets in MFEs or to have one giant stylesheet in a separate federated module?

Hello! Regarding the styles thing that is something that we've been messing around with in my team for almost a year now. So the problem we reached is that any css that you add in the mfes, when the mfe is imported as remote in the host, it will be applied in the whole app. So the ideal way to go is to have a common library of styles* that the host and all mfes import. It could be imported as your own personal/company npm style library, or another option if you're following a monorepo architecture is to put the style folder as another project, at the root level, and then all projects will import that same style folder. (I say style folder, but for small projects with little css, it could even be a css file that gets imported everywhere).

Answering your question, the style folder doesn't need to be a module federation project, it can be simple css/scss files, that you import. And the other option as I said, if you have a different css file in each mfe, when they are imported in the host all the css will be mixed, it doesn't seem very mantenible. Hope it helps !! 🥰

*for instance the theme folder in primereact.