remove tailwind, add bootstrap 5

package.json

@@ -9,16 +9,15 @@
   "dependencies": {
     "autoprefixer": "^10",
     "axios": "^0.26.1",
+    "bootstrap": "^5.1.3",
+    "bootstrap-icons": "^1.8.1",
     "core-js": "^3.8.3",
-    "flowbite": "^1.4.1",
     "postcss": "^8",
-    "tailwindcss": "^3",
     "vue": "^3.2.13",
     "vue-router": "^4.0.14"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~5.0.0",
-    "@vue/cli-service": "~5.0.0",
+    "@vue/cli-service": "~5.0.0"
-    "vue-cli-plugin-tailwind": "~3.0.0"
   }
 }

postcss.config.js

@@ -1,6 +1,5 @@
 module.exports = {
   plugins: {
-    tailwindcss: {},
     autoprefixer: {}
   }
 }

src/App.vue

@@ -15,7 +15,6 @@
 </template>
 
 <script>
-import "./assets/tailwind.css";
 import HelloWorld from "./components/HelloWorld.vue";
 // import Login from "./components/Login.vue";
 

src/assets/tailwind.css

@@ -1,5 +0,0 @@
-@tailwind base;
-
-@tailwind components;
-
-@tailwind utilities;

src/components/Cart.vue

@@ -1,21 +1,11 @@
 <template>
-  <link
-    href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
-    rel="stylesheet"
-  />
-  <link
-    rel="stylesheet"
-    href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"
-    integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm"
-    crossorigin="anonymous"
-  />
   <!-- <div class="top-0 fixed w-full">
     <Navbar />
   </div> -->
 
   <div class="container mt-3">
     <div class="wrapper wrapper-content animated fadeInRight">
-      <h1>Cart</h1>
+      <h1>Cart <i class="bi bi-123"></i> <i class="bi bi-house-door"></i></h1>
       <div class="row">
         <div class="col-lg-9 col-sm-12" style="overflow-x: auto">
           <div class="ibox">

src/components/Pay.vue

@@ -1,14 +1,4 @@
 <template>
-  <link
-    href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
-    rel="stylesheet"
-  />
-  <link
-    rel="stylesheet"
-    href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"
-    integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm"
-    crossorigin="anonymous"
-  />
   <!-- <div class="top-0 fixed w-full">
     <Navbar />
   </div> -->

src/main.js

@@ -1,8 +1,9 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
-import './assets/tailwind.css'
-import 'flowbite'
 import './interceptors/axios'
+import "bootstrap/dist/css/bootstrap.css"
+import "bootstrap/dist/js/bootstrap.js"
+import 'bootstrap-icons/font/bootstrap-icons.css'
 
 createApp(App).use(router).mount('#app')

tailwind.config.js

@@ -1,9 +0,0 @@
-const colors = require('tailwindcss/colors')
-
-module.exports = {
-  content: ['./public/**/*.html', './src/**/*.{vue,js,ts,jsx,tsx}', './node_modules/flowbite/**/*.js'],
-  theme: {
-    extend: {},
-  },
-  plugins: [require('flowbite/plugin')],
-}