Add vuestic

src/main.css

@@ -0,0 +1,26 @@
+@import 'https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,400;1,700&display=swap';
+@import 'https://fonts.googleapis.com/icon?family=Material+Icons';
+@import 'tailwindcss';
+@theme {
+  --breakpoint-xs: 0px;
+  --breakpoint-sm: 640px;
+  --breakpoint-md: 1024px;
+  --breakpoint-lg: 1440px;
+  --breakpoint-xl: 1920px;
+
+  --color-primary: #154ec1;
+  --color-secondary: #767c88;
+  --color-success: #3d9209;
+  --color-info: #158de3;
+  --color-danger: #e42222;
+  --color-warning: #ffd43a;
+  --color-backgroundPrimary: #f6f6f6;
+  --color-backgroundSecondary: #ffffff;
+  --color-backgroundElement: #ecf0f1;
+  --color-backgroundBorder: #dee5f2;
+  --color-textPrimary: #262824;
+  --color-textInverted: #ffffff;
+  --color-shadow: rgba(0, 0, 0, 0.12);
+  --color-focus: #49a8ff;
+  --color-transparent: rgba(0, 0, 0, 0);
+}

src/main.ts

@@ -1,12 +1,17 @@
 import { createPinia } from 'pinia';
 import { createApp } from 'vue';
 
+import { createVuestic } from 'vuestic-ui';
+import 'vuestic-ui/styles/essential.css';
+import 'vuestic-ui/styles/typography.css';
 import App from './App.vue';
+import './main.css';
 import router from './router';
 
 const app = createApp(App);
 
 app.use(createPinia());
 app.use(router);
+app.use(createVuestic());
 
 app.mount('#app');

src/pages/HomeView.vue

@@ -1,5 +1,10 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { VaButton } from 'vuestic-ui';
+</script>
 
-<template><h1>home</h1></template>
+<template>
+  <h1 class="text-3xl text-red-500">home</h1>
+  <VaButton icon="home" />
+</template>
 
 <style scoped></style>