update to tailwind v4

Author: why-Mia

package-lock.json

@@ -13,8 +13,8 @@
   },
   "dependencies": {
     "@headlessui/vue": "^1.7.23",
-    "@tailwindcss/vite": "^4.1.10",
-    "tailwindcss": "^4.1.10",
+    "@tailwindcss/vite": "^4.1.11",
+    "tailwindcss": "^4.1.11",
     "vue": "^3.5.13",
     "vue-router": "^4.5.0"
   },

package.json

@@ -22,8 +22,8 @@ onMounted(async () => {
           </router-link>
         <div class="flex items-center gap-4 flex-col md:flex-row">
           <nav class="flex gap-7 gap-y-2 text-gray-200 roboto text-center flex-wrap justify-center relative md:pr-4 pb-2 md:pb-0
-          after:bg-gray-400 after:absolute md:after:h-[80%] md:after:w-[1px] md:after:right-0 md:after:top-1/2 md:after:-translate-y-1/2
-          after:h-[1px] after:w-[40px] after:top-full">
+          after:bg-gray-400 after:absolute md:after:h-[80%] md:after:w-px md:after:right-0 md:after:top-1/2 md:after:-translate-y-1/2
+          after:h-px after:w-[40px] after:top-full">
             <router-link class="hover:text-gray-100 text-nowrap" to="/">Recent Records</router-link>
             <router-link class="hover:text-gray-100 text-nowrap" to="/maps">Map Leaderboards</router-link>
             <router-link class="hover:text-gray-100 text-nowrap" to="/players">Player Lookup</router-link>

src/App.vue

@@ -1,6 +1,30 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+body {
+  min-height: 100vh;
+  color: var(--color-text);
+  transition:
+    color 0.5s,
+    background-color 0.5s;
+  line-height: 1.6;
+  font-family:
+    Inter,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    Oxygen,
+    Ubuntu,
+    Cantarell,
+    'Fira Sans',
+    'Droid Sans',
+    'Helvetica Neue',
+    sans-serif;
+  font-size: 15px;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+@import 'tailwindcss';
 
 /* color palette from <https://github.com/vuejs/theme> */
 :root {
@@ -54,37 +78,3 @@
   }
 }
 
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-  margin: 0;
-  font-weight: normal;
-}
-
-body {
-  min-height: 100vh;
-  color: var(--color-text);
-  background: var(--color-background);
-  transition:
-    color 0.5s,
-    background-color 0.5s;
-  line-height: 1.6;
-  font-family:
-    Inter,
-    -apple-system,
-    BlinkMacSystemFont,
-    'Segoe UI',
-    Roboto,
-    Oxygen,
-    Ubuntu,
-    Cantarell,
-    'Fira Sans',
-    'Droid Sans',
-    'Helvetica Neue',
-    sans-serif;
-  font-size: 15px;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}