Making progress converting template

app/components/Header.vue

@@ -51,7 +51,6 @@ const onScroll = () => {
             <div class="lg:hidden">
               <NavLinksMobile :links="links" />
             </div>
-            <ColorModeSwitch />
           </div>
         </div>
       </div>

app/components/NavLinksMobile.vue

@@ -1,53 +1,40 @@
-<script setup lang="ts">
-import { Bars2Icon } from "@heroicons/vue/20/solid";
-
-const { links } = defineProps<{
-  links: { name: string; to: string }[];
-}>();
-</script>
 <template>
-  <nuxt-ui-dropdown as="div" class="inline-block text-left z-10">
   <div>
-        <nuxt-ui-dropdown-toggle class="border rounded-full px-2 py-2 text-zinc-500 border-zinc-500 hover:bg-white hover:text-zinc-900 hover:border-zinc-900 active:shadow-md focus:outline-none focus-visible:ring-2 focus-visible:ring-yellow-700 focus-visible:ring-opacity-75"
+    <v-btn icon @click="dialog = true">
-      >
+      <v-icon>mdi-menu</v-icon>
-        <span class="sr-only">Menu</span>
+    </v-btn>
-        <Bars2Icon class="h-4 w-4" aria-hidden="true" />
-        </nuxt-ui-dropdown-toggle>
-    </div>
 
-    <transition
+    <v-dialog v-model="dialog" fullscreen hide-overlay transition="dialog-bottom-transition">
-      enter-active-class="transition duration-100 ease-out"
+      <v-card>
-      enter-from-class="transform scale-95 opacity-0"
+        <v-toolbar dark color="primary">
-      enter-to-class="transform scale-100 opacity-100"
+          <v-btn icon @click="dialog = false">
-      leave-active-class="transition duration-75 ease-in"
+            <v-icon>mdi-close</v-icon>
-      leave-from-class="transform scale-100 opacity-100"
+          </v-btn>
-      leave-to-class="transform scale-95 opacity-0"
+          <v-toolbar-title>Menu</v-toolbar-title>
+        </v-toolbar>
+
+        <v-list>
+          <v-list-item
+            v-for="link in links"
+            :key="link.to"
+            @click="navigate(link.to)"
           >
-      <nuxt-ui-dropdown-menu
+            <v-list-item-title>{{ link.name }}</v-list-item-title>
-        class="absolute right-0 mt-4 w-56 origin-top-right divide-y divide-zinc-100 dark:divide-zinc-700 rounded-xl bg-white dark:bg-black shadow-lg ring-1 ring-black dark:ring-white ring-opacity-5 dark:ring-opacity-5 focus:outline-none"
+          </v-list-item>
-      >
+        </v-list>
-        <div class="px-2 py-2 w-full">
+      </v-card>
-          <nuxt-ui-dropdown-item
+    </v-dialog>
-            v-for="(link, index) in links"
-            :key="index"
-            v-slot="{ close }"
-          >
-            <NuxtLink
-              :class="[
-                $route.path === link.to
-                  ? 'bg-zinc-200 dark:bg-zinc-900 text-zinc-900 dark:text-zinc-200'
-                  : 'text-zinc-900 dark:text-zinc-200',
-                'group block w-full items-center rounded-xl text-sm',
-              ]"
-              :to="link.to"
-            >
-              <span @click.native="close" class="truncate px-4 py-2 block">{{
-                link.name
-              }}</span>
-            </NuxtLink>
-          </nuxt-ui-dropdown-item>
   </div>
-      </nuxt-ui-dropdown-menu>
-    </transition>
-  </nuxt-ui-dropdown>
 </template>
+
+<script setup lang="ts">
+import { useRouter } from 'vue-router'
+const props = defineProps<{ links: { name: string; to: string }[] }>()
+const dialog = ref(false)
+const router = useRouter()
+
+function navigate(to: string) {
+  dialog.value = false
+  router.push(to)
+}
+</script>

app/layouts/default.vue

@@ -17,7 +17,7 @@
           src="img/bg-glow.png"
           aria-hidden="true"
           class="w-[44rem]"
-          format="webp"
+          format="png"
           width="944"
           height="586"
         />

nuxt.config.ts

@@ -4,14 +4,10 @@ import tailwindcss from "@tailwindcss/vite";
 export default defineNuxtConfig({
   compatibilityDate: '2024-11-01',
   devtools: { enabled: true },
-  css: ['~/assets/css/main.css'],
+  // css: ['./assets/css/main.css'],
-
+  tailwindcss: {
-  vite: {
+    cssPath: "./assets/css/main.css",
-    plugins: [
-      tailwindcss(),
-    ],
   },
-
   future: {
     compatibilityVersion: 4
   },
@@ -23,6 +19,7 @@ export default defineNuxtConfig({
     '@nuxt/image',
     '@nuxt/scripts',
     'vuetify-nuxt-module',
+    '@nuxtjs/tailwindcss',
   ],
 
   ssr: true,

package.json

@@ -14,12 +14,14 @@
     "lint:fix": "eslint . --fix"
   },
   "dependencies": {
+    "@heroicons/vue": "^2.2.0",
     "@nuxt/eslint": "1.3.0",
     "@nuxt/fonts": "0.11.2",
     "@nuxt/icon": "1.12.0",
     "@nuxt/image": "1.10.0",
     "@nuxt/scripts": "0.11.6",
-    "@tailwindcss/vite": "^4.1.5",
+    "@nuxtjs/tailwindcss": "^6.14.0",
+    "@tailwindcss/typography": "^0.5.16",
     "@unhead/vue": "^2.0.3",
     "eslint": "^9.0.0",
     "nuxt": "^3.17.2",
@@ -30,10 +32,10 @@
   "devDependencies": {
     "@mdi/font": "^7.4.47",
     "@nuxt/fonts": "^0.11.1",
+    "@nuxt/postcss8": "^1.1.3",
     "autoprefixer": "^10.4.21",
     "postcss": "^8.5.3",
     "sass-embedded": "^1.86.3",
-    "tailwindcss": "^4.1.5",
     "typescript": "^5.6.3",
     "vue-tsc": "^2.1.6",
     "vuetify-nuxt-module": "^0.18.6"

tailwind.config.js

@@ -0,0 +1,40 @@
+module.exports = {
+    content: [
+      './pages/**/*.{js,ts,vue}',
+      './components/**/*.{js,ts,vue}',
+      './layouts/**/*.{js,ts,vue}',
+      './plugins/**/*.{js,ts,vue}',
+    ],
+    theme: {
+        fontFamily: {
+          display: ["Cormorant Garamond", "ui-serif", "Georgia"],
+          body: ["Poppins", "ui-sans-serif", "system-ui"],
+        },
+        extend: {
+          maxWidth: {
+            "8xl": "90rem",
+          },
+          colors: {
+            "body-dark": "#121213",
+          },
+          opacity: {
+            2: "0.02",
+          },
+          keyframes: {
+            "pulse-once": {
+              "0%, 100%": { transform: "scale(1)" },
+              "50%": { transform: "scale(1.2)" },
+            },
+          },
+          animation: {
+            "pulse-once": "pulse-once 0.5s cubic-bezier(0.4, 0, 0.6, 1) 1s 2",
+          },
+        },
+      },
+    plugins: [
+        require('@tailwindcss/typography'),
+      ],
+      
+  };
+  
+