Search code examples
javascriptlaravellaravel-mixinertiajslaravel-jetstream

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

I install jetstream+inertia.js into my laravel project and everything is working perfectly but I need to use bootstrap 5 in only welcome. vue component so how can I handle it?

My app.js file;

require('./bootstrap');

// Import modules...
import {createApp, h} from 'vue';
import {App as InertiaApp, plugin as InertiaPlugin} from '@inertiajs/inertia-vue3';
import 'animate.css';
import Toaster from '@meforma/vue-toaster';
import 'alpinejs';



const el = document.getElementById('app');

createApp({
    render: () =>
        h(InertiaApp, {
            initialPage: JSON.parse(el.dataset.page),
            resolveComponent: (name) => require(`./Pages/${name}`).default,
        }),
})
    .mixin({methods: {route}})
    .use(InertiaPlugin)
    .use(Toaster)
    .mount(el);

My app.css file:

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

image

Solution

  • 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.js
module.exports = {
  prefix: 'tw-',
}

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