Tailwind Conflict with Bootstrap

Background

I have a legacy project that I will continue to maintain for my client.
The project was based on Laravel & Bootstrap
There's a lot of revamp needs to be made in design
Not only in design, but new features are planned to be added, existing features modified.
Because, I'm at best when using React, so I integrated it with Inertia / React (with Tailwind) for new features
- I let existing features to exists using legacy rendering system & styles
- Mostly only new major feature & modification that will need to use Inertia
- New feature & some modification will need to use Tailwind
- I need to integrate shadcn-ui to improve developer productivity (me)

Integration with Inertia > React was smooth
Overall, there's no issue with integration, all existings features are working properly and styling is not affected.

The problem now is when I tried to use shadcn-ui, the styling is get overriden by existing Bootstrap classes.
It's because there's naming conflict, e.g both Bootstrap and Tailwind has same "p-5", "bg-primary", etc but have different css value
It makes the shadcn-ui renders wrong styling

Use Tailwind prefix both configured in tailwind.config.js & components.json (shadcn-ui)
Pick "tw-" for prefix
This way existing bootstrap classes are left untouched, and whenever I want to use tailwind classes I need to use the prefix.
Also because shadcn-ui is configured to use prefix, now whenever I add new components it will default to use the prefix
All existing installed shadcn-ui components needs to be reinstalled.