Micro Front Ends 🤝 Tailwind?

[moshekatz]

Hey 👋,
I'm working on a large micro frontend app (50+ different repos, layout components shared across 99% of pages, custom shared components on multiple pages).

I was wondering how would you integrate tailwind in an efficient way.

Thanks in advance!

[sir-captainmorgan21]

@moshekatz Same. Not necessarily at that scale, but have the same problem. There are three options I see atm.

1. What I have proofed out so far is this (and this is with Angular). I set up the MFE builds to bundle the tailwind css with each MFE module. So each MFE ends up with its own purged tailwindcss set. You end up with duplicated CSS being shipped to the client (across MFEs or between MFEs and the host app). However, if the MFEs are built right, this wouldn't have too much impact as thet wouldn't be utilizing too much of the Tailwind CSS hopefully.
2. You prebuild the Tailwind CSS and have everything consume that. To help with size, you start with most utilities turned off and you basically turn them on when you need them (I dont like this option at all).
3. Everythign consumes a base tailwind config and then each app excludes stuff from the purge depending on the MFEs they bring in.

Thats all I can think of. Another potential option is having all the MFEs be packages and any app consuming a certain MFE would npm install that package just to simply have tailwind parse it to purge properly (this could be a decent option. Just haven't played with it).

EDIT
Another option is for the root or "shell" app to have the tailwind config and host the generated CSS. This works nicely with a mono-repo, but would take some thought if your MFEs are scattered across repos. They'd likely have to be published as npm packages so the shell app can install them strictly for Tailwind to have a place to parse the MFEs' HTML and TS/JS

[akshay-nm]

Will the first option work well with federated modules?

[vinothck]

Is possible to share the repo link.?

[sir-captainmorgan21]

@akshay-nm yes. Thats actually what I was using for the POC. @vinothck Ill try to get my POC up into github

[sir-captainmorgan21]

@akshay-nm @vinothck sorry it took so long, but here is the POC: https://github.com/sir-captainmorgan21/mfe-tailwind

[skimhugo]

I isolate every sub app. and inject the css file below the sub app. I use this solution:https://github.com/MinJieLiu/micro-app

and style inject like:

function createLink(href) {
  const link = document.createElement("link");
  link.rel = "stylesheet";
  link.href = href;
  return link;
}
defineApp.styleInject = (parentNode) => {
  ["./assets/style.cd5fecfe.css"].forEach((css) => {
    const link = createLink(new URL(css, import.meta["url"]));
    parentNode.prepend(link);
  });
};

[skimhugo]

parentNode is sub-app itself. and base app just have tailwind css reset.

[nicolaiunrein]

Today I thought using the JIT CDN would be great for MFEs and then I found Twind which seems to be the perfect fit for my usecase.

Before I was experimenting with option 1 of the original post. The problem was that in Tailwind the order of the classes actually matter a lot when it comes to variants so the style of hover:text-blue would be overwritten by another MFE loaded at a later point in time with the bare text-blue class because now .text-blue comes after the hover variant. I then decided to use postcss-class-prefixer with a custom prefix per MFE to scope the classes to the children of the root of the MFE.

I did not like my solution because it was very brittle and hard to debug. Tailwind classes existed all over the place. And TW classes in the root app could not be easily scoped.

I was at a point where I regretted using TW for my MFE project and thought that TW is not a great fit for MFEs in general. Compilation of TW classes on the client side could change that drastically. The benefit is that all my MFEs do not need to care about TW anymore and they all use the same styles automatically. I just define a styleguide in the root app via a custom tailwind config and be happy.

[moshekatz]

Very interesting perspective, thanks.

With twind or the JIT CDN, you're generating the classes on runtime - which means a waterfall is created on load and you can't load cached styles in parallel with JS.

On the other side, not being able to reason about MFE in isolation is a 🚩 in my opinion.

I wonder if a monorepo could help with bridging the gap between the approaches somehow 🤔

[nicolaiunrein]

@moshekatz My project is somewhat special as it is a frontend for a local server not a classic web app. So I do not care about caching since all calls are within the local network. On the other hand Twind is only 13kb and only loaded once not for each MFE. And if you are only using TW classes no other resources need to be fetched at all.

[sir-captainmorgan21]

@moshekatz a mono repo I think helps a ton. With MFEs, you have that shell app. That shell app is the one that hosts the generated TailwindCSS. This does result in CSS being shipped that isn't necessarily used by a particular page, but with Tailwind and its utility nature (assuming you are avoiding arbitrary values as much as possible), the overall CSS size in general shouldn't be problematic.

[dfNaila]

I have included Tailwind CSS in a library that I import into my shell application. However, when I navigate to my micro-frontends (MFEs) through the shell, the Tailwind CSS classes do not load. This happens because the classes need to be loaded in the shell beforehand, and the shell does not detect the MFE's code, so it doesn't load their classes.

[sir-captainmorgan21]

You'd have to update the shell to look into the MFEs code as well.

[HaasStefan]

For Angular:

https://ng-journal.com/blog/2022-12-02-tailwind-and-module-federation/

[liu-lihao]

The order of style is: shell-tailwind> shell-custom > mfe-remote-tailwind -> mfe-remote-custom
Exp:

// shell component
<div class="w-full" >I am Component</div>

// shell use component
<Comp class="my-component-class" /> // expect width: 80%，But after loading mfe-remote, it turned back to [w-full]

because：

.w-full { width: 100%; } /* shell-tailwind */
.my-component-class { width: 80% ; } /* shell-custom */
.w-full { width: 100%; } /* mfe-remote-tailwind */
.other-remote-component-class { width: 33%; } /*  mfe-remote-custom */

[jmvtrinidad]

currently the most nice solution for MFE is this one I think
https://malcolmkee.com/blog/using-tailwindcss-with-module-federation/#a-new-solution
If somehow tailwind will be able to support a configuration like this without creating a tw function that would be nice.
the extra bytes/kb is fine for me as well.

[tejas-1206]

Well, https://tailwindcss.com/docs/plugins#prefix-and-important-1 ....this already exists !

[jmvtrinidad]

if we add a prefix on tailwind config the IDE will recognized it and will suggest to have a prefix when writing tailwind classnames.
The above solution will allow you to write css names and IDE recognized it as well without prefix.