CSS Overriding Issue When Using Tailwindcss with React and Vite

[aliinnov8s]

Hi

I am running into a problem in which my MFEs are using Tailwind, React and Vite. When I am putting all of this together in my core project which also has its CSS for the layout purposes, the styles of the respective MFE is overriding and it is losing its styling. Can you please guide me in this regard that where we are doing something wrong? Thanks!

Warm Regards

[webJose]

What's the definition of "core project"? In single-spa, we have root projects and MFE projects. Is "core project" == "root project"?

Generally speaking, you need to make sure that your classes are scoped. React has no CSS scoping solution out of the box, so you'll have to look for a solution, for which I'm sure there are several. Scoped CSS will only affect the user interface for the project it comes from.

[aliinnov8s]

Yes, core project is basically root project and the following is the definition of the project
plugins: [ react(), nxViteTsPaths(), vitePluginSingleSpa({ type: 'root', importMaps: { dev: ['src/importMap.development.json', 'src/importMap.shared.json'], build: [src/importMap.${mode}.json, 'src/importMap.shared.json'], }, imoUi: { variant: 'full', buttonPos: 'bottom-right', localStorageKey: 'sip-spa-devtools', }, }), ],

[webJose]

TIP: Use code blocks to paste code.

I think the above is probably OK (there's a copy/paste issue, apparently). That seems like a good configuration for a root project. But that has nothing to do with CSS.

Like I said, CSS needs to be scoped. Scope your CSS any way you see fit, and then use cssLifecycleFactory to mount the compiled CSS.