What I am trying to do:

I am trying to use both Tailwind and Bootstrap 5 in the same project (I can't exactly remove one and use the other). So, I am trying to make them both play nice by attempting to prefix all the class names with unique names.

Tailwind easily supports this with the prefix argument, however, I can't seem to figure out how to do it with Bootstrap 5.

Relevant Code/Errors: I am not getting any per se. See Attempts.

Attempts:

1. I tried to recompile Bootstrap with a namespace, following this example:
https://www.youtube.com/watch?v=f4fikVsxbzw But it didn't seem to work? It looked like bootstrap still overwrote tailwind, even when the prefix wasn't specified (Namely, the <a> tags were favoring bootstrap over tailwind, even though they were styled with TW)

2. I tried to maybe use SASS and attempt something like this:

.hasbootstrap {
    @import "bootstrap/dist/css/bootstrap.css";
    @import url("bootstrap/dist/css/bootstrap.css");
    @import "bootstrap/scss/bootstrap.scss";
  }
  

If you Ignore the fact that I tried 3 imports for a second, the browser isn't happy at all (Image 1).

I am not sure how to exactly proceed from here. Is there a simple way to namespace Bootstrap 5 such that I can possibly specify which <div> it should affect? OR have a prefix to all the class names and have it be like Tailwind?

Eg:

<div class="...">
 NO BOOTSTRAP
<div class="useBT">
 USE BOOTSTRAP
<div />
<div />

OR

<div class="btw-d-flex btw-justify-content-center btw-justify-content-md-start btw-gap-3">
 USE BOOTSTRAP
<div />

For reference, I tried to eliminate the usage of bootstrap, but it seemed the tailwind couldn't do the same thing. So I am somewhat stuck using it.