Global CSS across micro-apps

[nicholas-c]

Hey! This is a subject I've had difficulty exploring and getting a general consensus on, even though I've broadly done similar in the past, but I thought I'd get the communities opinions on this too.

Long story short, we have 26 micro-apps for our core website, of which serve areas of a customers experience. Right now, we have a themeprovider (passes color/sizing variables etc down), or a HOC to wrap a give a theme prop, and use CSS-in-JSX to build individual components. However we've ended up with a horribly inconsistent mess that the UX designers are crying out to be fixed generally as well as a few performance issues I've highlighted.

Going forward, The plan is that we're going to have a global project that generates a CDN'd CSS file from tailwind, and also use this as a "design system library", then the shared "global" components are simply imported and use the tailwind classes where appropiate with a few high level CSS components like .btn pre-declared.

Is this the best way to approach micro-apps though? A lot of the developer team are scared this is going to lose the control and finesse of creating an app, but we defintely need some change!

In terms of tailwind's output CSS weight too, if it were a single application with tailwind, you can use purgeCSS and remove un-necessary code, however in the context of sharing it across 26 micro-apps, that's not possible directly, is there any sort of win here to control the file size? If each app pulls in the tailwind.config and builds its own CSS, then you have a lot of repeating code and weight added to each page request and the end-user would suffer in network performance and payload.

[KevinMind]

Same question. Is there some kind of runtime css extractor for tailwind? Similar to how styles components handles server side rendering. ??

[jwlms]

@nicholas-c have you found a work around for this? I attempted to get a what sounds like the same setup working with tailwinds but was unsuccessful. I am now about to create a fork tachyons since the library seems to no longer be maintained and that is what I'm currently using for the micro apps I maintain (though I'd love to use tailwinds).

[zslabs]

While I can't comment on the CDN portion, presets https://tailwindcss.com/docs/presets sound like something that would allow you to keep all of your config in a single spot, and have it installable within each micro site. There's bound to be extra classes used in each micro site (especially if not in a mono repo) that'll make it a little tricky to grab everything you need, so a preset will give you all the base config and still let developers build their own utilities on top of it.

[jwlms]

@zslabs - thanks for pointing me to that! I hadn't actually reviewed that section of the docs, so I'll need to take a closer look as it seems like it might be able to solve my particular issue (which I outline here if you're interested: #8703).