how can I use bootstrap instead of tailwind CSS in vue.js welcome component how can I use bootstrap instead of tailwind CSS in vue.js welcome component laravel laravel

how can I use bootstrap instead of tailwind CSS in vue.js welcome component


A potential solution for you is to use both css frameworks concurrently.

You can import and use Bootstrap 5 using npm install bootstrap@next (more detail here: https://5balloons.info/setting-up-bootstrap-5-workflow-using-laravel-mix-webpack/).

Then to avoid class name collisions you can setup a prefix for your Tailwind classes; in tailwind.config.js you could add a tw- prefix by setting the prefix option (more detail here: https://tailwindcss.com/docs/configuration#prefix):

// tailwind.config.jsmodule.exports = {  prefix: 'tw-',}

You will have a bit of work updating the existing Tailwind classes with the prefix but it will work.


There is a package made for this https://github.com/nascent-africa/jetstrap

It allows you to switch between Bootstrap, Tailwind and other UI Kits.


You have Boostrap-vue but it is still Bootstrap 4 (they are migrating to B5)

npm i bootstrap-vue

If you really need Bootstrap 5 you can do

npm install bootstrap@next

Or import it via CDN

https://getbootstrap.com/docs/5.0/getting-started/download/