FR: Specific CSS class for AccountKit modal // Optional custom prefix for Tailwind classes

[derwaldgeist]

When trying to embed the AccountKit modal into our existing app that uses Bootstrap, we encountered quite some issues on the Bootstrap classes, since they are overridden by Tailwind. Most notably, the .collapse class will hide a lot of our UI elements.

We were able to work-around some of these by overriding Tailwind with more specific CSS, but we're not really sure if we solved this for all of our UI elements, since there are many of them.

Since we do not need Tailwind apart from AccountKit, we'd love to separate things to keep these unwanted side-effects as low as possible.

The very minimum we'd need is a specific CSS class for the Modal that AccountKit spawns in the DOM. Currently it's just a DIV without any CSS class applied to it. This prevents us from targeting the modal directly.

An better way would be an option of openAuthModal() where a prefix for the Tailwind classes could be set (e.g. "tw-"). We'd then set this prefix for Tailwind in general, so all CSS would be separate out-of-the box.

An even better solution would be if AccountKit used a Web Component with a ShadowDOM instead of Tailwind-styled CSS, since this would eliminate any potential side-effects altogether. Adding Tailwind to an existing app is not a trivial task, especially if you've been using other UI frameworks so far.