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

Does it need to be Bootstrap v5? Or would v4 work? – Andrew Mar 05 '21 at 17:15 — Andrew, Mar 05 '21 at 17:15

Andrew · Accepted Answer · 2021-03-12T14:45:14.200

6

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.

edited Mar 12 '21 at 14:45

answered Mar 11 '21 at 03:51

Andrew

1,745
1
21
29

2

The following online tool can apply prefix to Tailwind classes https://github.vue.tailwind-prefix.cbass.dev/ . You'll have to copy/paste each file but that's better than adding prefixes manually. – stacky Apr 10 '21 at 13:28

score 0 · Answer 2 · answered Mar 09 '21 at 13:10

0

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.

answered Mar 09 '21 at 13:10

Musti

470
2
11

thanks but I want to use tailwind Css in Jetstream. – ORHAN ERDAY Mar 09 '21 at 13:22

score -2 · Answer 3 · answered Mar 09 '21 at 01:20

-2

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/

answered Mar 09 '21 at 01:20

Yolan Mees

107
2

Read your own question. "bootstrap instead of tailwind CSS". And I did not say to remove tailwindcss. You can use them together. – Yolan Mees Mar 09 '21 at 09:36
What problem do you face that you cant use them together now? – Yolan Mees Mar 09 '21 at 09:49
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. – ORHAN ERDAY Mar 09 '21 at 10:10
1

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. – Yolan Mees Mar 09 '21 at 10:32
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/229679/discussion-between-orhan-and-yolan-mees). – ORHAN ERDAY Mar 09 '21 at 10:35

score -2 · Answer 4 · answered Mar 11 '21 at 04:31

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!!

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). — Andrew, Mar 11 '21 at 04:50
I'll make amendments for bootstrap 5, thanks for pointing out the problem. — Ankit Jindal, Mar 11 '21 at 04:53
I agree to Andrew, unfortunately this is not a solution,I just wanna use bootstrap in my Welcome.vue component. — ORHAN ERDAY, Mar 11 '21 at 06:01

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

4 Answers4