Add base color, add sass loader

client/package.json

@@ -34,6 +34,8 @@
     "postcss": "^8.4.12",
     "postcss-import": "^14.1.0",
     "prettier": "^2.5.1",
+    "sass": "^1.50.1",
+    "sass-loader": "^12.6.0",
     "start-server-and-test": "^1.14.0",
     "tailwindcss": "^3.0.24",
     "typescript": "~4.6.3",

client/src/App.vue

@@ -21,7 +21,6 @@ import HelloWorld from '@/components/HelloWorld.vue'
 </template>
 
 <style>
-@import '@/assets/base.scss';
 
 #app {
   max-width: 1280px;

client/src/assets/styles/base.scss

@@ -1,2 +1,3 @@
+
 h1 {
 }

client/src/components/TheWelcome.vue

@@ -15,8 +15,11 @@ import SupportIcon from './icons/IconSupport.vue'
     <template #heading>Documentation</template>
 
     Vue’s
-    <a target="_blank" href="https://vuejs.org/">official documentation</a>
+    <a class="bg-blue" target="_blank" href="https://vuejs.org/">official documentation</a>
     provides you with all information you need to get started.
+      <h1 class="text-3xl font-bold underline">
+    Hello world!
+  </h1>
   </WelcomeItem>
 
   <WelcomeItem>

client/src/main.ts

@@ -4,7 +4,7 @@ import { createPinia } from 'pinia'
 import App from './App.vue'
 import router from './router'
 
-import './index.css'
+import '@/assets/styles/index.scss'
 
 const app = createApp(App)
 

client/tailwind.config.js

@@ -5,6 +5,9 @@ module.exports = {
     "./src/**/*.{vue,js,ts,jsx,tsx}",
   ],
   theme: {
+    colors: {
+      'blue-dark': '#00224D'
+    },
     extend: {},
   },
   plugins: [],