Changing Shadow Classes on Popover and SelectMenu

[saschafuchs]

I currently have the problem that we have to integrate our SPA into a larger application. And with that, we also inherit the CSS of the outer application. And that's where it gets really ugly: they have partially written classes in their own CSS files that use the TW naming scheme (m, p, gap, shadow, etc.), and then add !important to these declarations.

One of the big problems with Nuxt UI is that there is no prefixing of Tailwind classes. So we started writing TW utilities with a prefix for the affected classes. This is then transferred to app.config. The second problem was the merge process that app.config uses. Usually the names have to match. If I want to have a p-4 from the config (because px values with !important were entered in the outer CSS), I created the class p-00, which replaces the p-4 class and thus clears the way for the prefixed TW class o-p-4.

So far so good, but I can't use it with popovers like SelectMenu. No matter what I do, the class shadow-lg remains. The other devs of the main application have entered a rather ugly shadow with important there.

Is there another prop like 'content' that I can use to replace shadow-lg? I'm not a fan of !important, but at this point I can only work this way.

Furthermore, it would be really nice if you could really overwrite the sections in app.config instead of just merging them (apart from prefixing the TW classes). There are certain stylings that you won't use, but then they are in the element