chore: adding tailwind to the stack (but we can remove it if we don't need it)

package.json

@@ -9,7 +9,9 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@tailwindcss/vite": "^4.1.6",
     "bulma": "^1.0.4",
+    "tailwindcss": "^4.1.6",
     "vue": "^3.5.13"
   },
   "devDependencies": {

src/App.vue

@@ -1,9 +1,12 @@
 <script setup lang="ts">
 import HelloWorld from './components/HelloWorld.vue'
+// import SideBar from './components/organisms/SideBar.vue'
 import './assets/style.scss'
+import 'bulma/css/bulma.css'
 </script>
 
 <template>
+  <!-- <SideBar /> -->
   <div>
     <a href="https://vite.dev" target="_blank">
       <img src="/vite.svg" class="logo" alt="Vite logo" />
@@ -12,7 +15,7 @@ import './assets/style.scss'
       <img src="./assets/vue.svg" class="logo" alt="Vue logo" />
     </a>
   </div>
-  <HelloWorld msg="Vite + Vue" />
+  <HelloWorld msg="Vite + Vue = bråtula!" />
 </template>
 
 <style scoped>

src/assets/style.scss

@@ -4,4 +4,10 @@ $viossa-blue: #00baff;
 
 body {
   background-color: $viossa-blue;
+  font: normal Verdana, Arial, sans-serif;
+  color: black;
 }
+
+h1 {
+  font-size: 48px;
+}

src/components/organisms/SideBar.vue

@@ -0,0 +1,7 @@
+<script setup>
+
+</script>
+
+<template>
+
+</template>

vite.config.ts

@@ -1,9 +1,10 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import tailwindcss from '@tailwindcss/vite'
 
 // https://vite.dev/config/
 export default defineConfig({
-  plugins: [vue()],
+  plugins: [tailwindcss(), vue()],
   build: {
     outDir: '/var/www/viossa.net',
     emptyOutDir: true,