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

Question

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';

Astatic

Does it need to be Bootstrap v5? Or would v4 work? – Phelgen

@Phelgen bootstrap v5 – Astatic

Answer 1

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.

Phelgen

The following online tool can apply prefix to Tailwind classes github.vue.tailwind-prefix.cbass.dev . You'll have to copy/paste each file but that's better than adding prefixes manually. – Riesling

Answer 2

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.

Triphthong

thanks but I want to use tailwind Css in Jetstream. – Astatic

Answer 3

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/

Morphophonemics

Read your own question. "bootstrap instead of tailwind CSS". And I did not say to remove tailwindcss. You can use them together. – Morphophonemics

What problem do you face that you cant use them together now? – Morphophonemics

tailwind CSS and bootstrap is overlap. I'm using Jetstream, and jetstream for helping application's login, registration, email verification, two-factor authentication, session management, API via Laravel Sanctum so Laravel Jetstream uses tailwind CSS for the front-end and I just wanna use bootstrap in my Welcome.vue component. I hope you understand. – Astatic

Jetstream was build to use with Tailwind. If u want to remove it you should rebuild all the views to bootstrap. It is not a good idea to combine Tailwind css and bootstrap but it will work. – Morphophonemics

Let us continue this discussion in chat. – Astatic

Answer 4

Though Laravel 8 comes with Tailwind by default, we can still use bootstrap or similar CSS framework for our app.

Navigate to the project folder and install the latest version of the laravel/ui package

composer require laravel/ui

Then install Bootstrap:

php artisan ui bootstrap

Execute the below command to install the auth scaffoldings with Bootstrap:

php artisan ui bootstrap --auth

Then install the bootstrap package and its dependencies from npm:

 npm install

 #development
 npm run dev 

 #production
 npm run production

The above command compiles CSS and JavaScript files from resources/js and resources/sass folder to the public folder.

Automate sass and js changes:

 npm run watch

Now we can define the js and css path and use bootstrap in the blade template:

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">

    <title>{{ config('app.name', 'Laravel') }}</title>

    <!-- Scripts -->
    <script src="{{ asset('js/app.js') }}" defer></script>

    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>

<body>
    <h1>Tutorial made by Positronx.io</h1>
</body>
</html>

Hope this works for you!!

Trilley

This lays out installing bootstrap nicely but OP mentioned that they require Bootstrap v5 specifically. laravel/ui comes with Bootrap v4. They also want to use both Tailwind and Bootstrap (in different parts of their application - Bootsrap v5 specifically in the welcome.vue component and Tailwind elsewhere), your solution I think is directed at using one, or the other (or there would b overlapping class names). – Phelgen

I'll make amendments for bootstrap 5, thanks for pointing out the problem. – Trilley

I agree to Andrew, unfortunately this is not a solution,I just wanna use bootstrap in my Welcome.vue component. – Astatic