Here is a scenario, You are using the socialstream laravel plugin by Joel Butcher (You can donate to the guy for his hard work), You don’t have the time to modify the pages, and you want to throw in bootstrap alongside tailwind that ships with socialstream, the process to do this is not so hard, let us stick to this example and resolve the issue and then you can adapt this to whatever your situation is.
Off the bat, bootstrap and tailwind have conflicting class names ! they can not be used together without adding a prefix, but there are solutions to make it happen depending on your use case.
Again, whatever your use case may be, there are multiple solutions that need to be mixed and matched, I will start by providing the methods to allow both Bootstrap and Tailwind to co-exist, then, I will provide the common use cases below and refer to the solution(s) that work best with them
Solution 1- Change the tailwind class prefix !
This is the simplest solution
You start by editing the file tailwind.config.js and adding the prefix option.
module.exports = {
prefix: 'tw-',
}The run “npm install && npm run build”
On laravel, this will add tw- as a prefix to all the utility classes, the effect can be seen in the files
the use of tailwind CSS that came with your scaffolding plugins probably is not massive.
Case 1: My design is in bootstrap, but scaffolding packages use tailwind !
For example, one reason you are probably trying to do this is when you have Laravel packages that provide a front end that uses tailwind, but your design is all done in bootstrap !
The solutions are