Transpile GSAP; move self-hosted fonts to scss

assets/css/main.scss

@@ -1,5 +1,15 @@
-
+@import "@fontsource/inter/400";
+@import "@fontsource/inter/600";
+@import "@fontsource/inter/700";
+@import "@fontsource/inter/800";
+@import "@fontsource/inter/900";
+@import "@fontsource/open-sans/400";
+@import "@fontsource/open-sans/400-italic";
+@import "@fontsource/open-sans/600";
+@import "@fontsource/open-sans/600-italic";
+@import "@fontsource/open-sans/800";
+@import "@fontsource/open-sans/800-italic";
 
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;

components/Navbar/UserLoggedIn.vue

@@ -16,7 +16,7 @@
     >
       <span class="sr-only">Profile</span>
       <img
-        src="https://res.cloudinary.com/skepfusky-dookie/image/upload/q_75/projects/misc/ozzy-fp-banner.png"
+        src="https://res.cloudinary.com/kuroji-fusky-s3/image/upload/q_75/projects/misc/ozzy-fp-banner.png"
         alt="Profile"
       />
     </button>

components/TheBaseNavbar.vue

@@ -4,7 +4,7 @@
       <div class="flex items-center gap-x-6">
         <NuxtLink to="/" class="flex items-center gap-x-2.5 logo-wordmark">
           <span class="sr-only">MyFursona</span>
-          <IconMono class="w-[3.25rem] h-[3.25rem] text-purple-500"/>
+          <IconMono class="w-[3.25rem] h-[3.25rem] text-purple-500" />
           <span>MyFursona</span>
         </NuxtLink>
         <NavbarSearchBox />

nuxt.config.ts

@@ -9,30 +9,6 @@ export default defineNuxtConfig({
       },
     ],
   ],
-  css: [
-    "@fontsource/inter/400.css",
-    "@fontsource/inter/600.css",
-    "@fontsource/inter/700.css",
-    "@fontsource/inter/800.css",
-    "@fontsource/inter/900.css",
-    "@fontsource/open-sans/400.css",
-    "@fontsource/open-sans/400-italic.css",
-    "@fontsource/open-sans/600.css",
-    "@fontsource/open-sans/600-italic.css",
-    "@fontsource/open-sans/800.css",
-    "@fontsource/open-sans/800-italic.css",
-    "~/assets/css/main.scss",
-  ],
-  postcss: {
-    plugins: {
-      tailwindcss: {},
-      autoprefixer: {},
-    },
-  },
-  typescript: {
-    shim: false,
-    strict: true,
-  },
   app: {
     head: {
       link: [
@@ -47,4 +23,21 @@ export default defineNuxtConfig({
       ],
     },
   },
+  build: {
+    transpile: ["gsap"],
+  },
+  css: ["~/assets/css/main.scss"],
+  postcss: {
+    plugins: {
+      tailwindcss: {},
+      autoprefixer: {},
+    },
+  },
+  webpack: {
+    optimizeCSS: true,
+  },
+  typescript: {
+    shim: false,
+    strict: true,
+  },
 })

package.json

@@ -9,16 +9,16 @@
   },
   "devDependencies": {
     "@fontsource/inter": "^4.5.14",
-    "@fontsource/open-sans": "^4.5.13",
+    "@fontsource/open-sans": "^4.5.14",
     "@iconify-prerendered/vue-fa6-brands": "^0.18.1662097805",
     "@nuxtjs/color-mode": "^3.2.0",
     "@pinia/nuxt": "^0.4.6",
     "autoprefixer": "^10.4.13",
     "gsap": "^3.11.4",
-    "nuxt": "3.0.0",
+    "nuxt": "^3.0.0",
     "pinia": "^2.0.29",
     "postcss": "^8.4.20",
     "sass": "^1.57.1",
     "tailwindcss": "^3.2.4"
   }
-}
+}

tailwind.config.js

@@ -29,8 +29,8 @@ module.exports = {
   theme: {
     extend: {
       fontFamily: {
-        inter: ["Inter"],
-        "open-sans": ["Open Sans"],
+        inter: ["Inter", 'sans-serif'],
+        "open-sans": ["Open Sans", 'sans-serif'],
       },
     },
   },