added tailwind

src/App.vue

@@ -6,8 +6,8 @@ import { NavigationModel } from "./components/Index.js";
 <template>
     <div class="app-container">
         <NavigationModel />
-        <div class="container">
-            <router-view />
+        <div class="container mx-auto">
+            <router-view class="mt-4" />
         </div>
     </div>
 </template>
@@ -20,11 +20,4 @@ import { NavigationModel } from "./components/Index.js";
   width: 100%;
  }
 
-  .container
-  {
-    max-width: auto;
-    margin: 1rem;
-    padding: 0.5rem 1rem;
-    background: black;
-  }
 </style>

src/css/head.css

@@ -0,0 +1,52 @@
+/* color palette from <https://github.com/vuejs/theme> */
+:root {
+  --vt-c-white: #ffffff;
+  --vt-c-white-soft: #f8f8f8;
+  --vt-c-white-mute: #f2f2f2;
+  --vt-c-black: #181818;
+  --vt-c-black-soft: #222222;
+  --vt-c-black-mute: #282828;
+  --vt-c-indigo: #2c3e50;
+  --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
+  --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
+  --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
+  --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
+  --vt-c-text-light-1: var(--vt-c-indigo);
+  --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
+  --vt-c-text-dark-1: var(--vt-c-white);
+  --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
+}
+
+/* semantic color variables for this project */
+:root {
+  --color-background: var(--vt-c-white);
+  --color-background-soft: var(--vt-c-white-soft);
+  --color-background-mute: var(--vt-c-white-mute);
+  --color-border: var(--vt-c-divider-light-2);
+  --color-border-hover: var(--vt-c-divider-light-1);
+  --color-heading: var(--vt-c-text-light-1);
+  --color-text: var(--vt-c-text-light-1);
+  --section-gap: 160px;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-background: var(--vt-c-black);
+    --color-background-soft: var(--vt-c-black-soft);
+    --color-background-mute: var(--vt-c-black-mute);
+    --color-border: var(--vt-c-divider-dark-2);
+    --color-border-hover: var(--vt-c-divider-dark-1);
+    --color-heading: var(--vt-c-text-dark-1);
+    --color-text: var(--vt-c-text-dark-2);
+  }
+}
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  position: relative;
+  font-weight: normal;
+}
+
+/*# sourceMappingURL=head.css.map */

src/css/head.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["head.scss"],"names":[],"mappings":"AAAA;AACA;EACE;EACA;EACA;EAEA;EACA;EACA;EAEA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;;;AAGF;AACA;EACE;EACA;EACA;EAEA;EACA;EAEA;EACA;EAEA;;;AAGF;EACE;IACE;IACA;IACA;IAEA;IACA;IAEA;IACA;;;AAIJ;AAAA;AAAA;EAGE;EACA;EACA;EACA","file":"head.css"}

src/css/main.scss

@@ -1 +1,4 @@
-@import 'base.scss';
+@import 'base.scss';
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

src/views/muscles/Back.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="back">
+    <div class="text-3xl font-bold underline text-blue-500">
       <h1>Back</h1>
       <ExerciseList muscle="Back"/>
     </div>

src/views/muscles/Chest.vue

@@ -1,8 +1,14 @@
 <template>
-  <div class="chest">
-    <h1>Chest</h1>
-    <ExerciseList muscle="Chest"/>
+  <div class="flex">
+    <div class="w-1/3">
+      <h1 class="test">Chest</h1>
+       <ExerciseList muscle="Chest"/>
     </div>
+    <div class="w-2/3">
+      Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium, ex quisquam eligendi amet assumenda eveniet ut atque obcaecati temporibus voluptas, molestiae blanditiis illo architecto quo beatae sapiente cupiditate impedit nesciunt.
+    </div>
+  </div>
+    
   </template>
 
 <script setup>