chore: Update Tailwind CSS configuration and enhance typography support

Author: coredev-uk

app/assets/css/tailwind.css

@@ -1,3 +1,5 @@
+@import url("https://rsms.me/inter/inter.css");
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

app/components/Testimonies.vue

@@ -21,21 +21,17 @@
     </div>
     <div class="flex h-[350px] w-full shrink-0 items-end p-2 md:w-[700px] lg:h-full lg:p-8">
       <swiper-container
-        :autoplay="{ delay: 4000 }"
+        :autoplay="{ delay: 5000 }"
         :speed="800"
         loop
         grab-cursor
-        :slides-per-view="1"
+        style="overflow: hidden; margin-left: 100px;"
         :breakpoints="{
           640: {
-            slidesPerView: 1.1,
+            slidesPerView: 1.01,
             spaceBetween: 100,
-            autoplay: {
-              delay: 7000,
-            },
-          },
+          }
         }"
-        style="overflow: hidden"
       >
         <swiper-slide v-for="t in testimonies" :key="t.author">
           <div

app/pages/changelogs/[...id].vue

@@ -35,7 +35,7 @@
       <div class="xl:grid xl:grid-cols-[1fr,250px] xl:gap-5">
         <!-- Page content -->
         <div
-          class="prose prose-lg prose-rose dark:prose-invert lg:prose-base prose-headings:scroll-mt-16 prose-headings:tracking-tight prose-h2:mt-6 prose-h2:border-b prose-h2:pb-3 first:prose-h2:mt-10 prose-a:decoration-primary prose-a:underline-offset-2 hover:prose-a:text-primary prose-pre:text-lg lg:prose-pre:text-base mx-auto w-full min-w-0 max-w-none py-5"
+          class="prose prose-lg prose-rose mx-auto w-full min-w-0 max-w-none py-5 dark:prose-invert lg:prose-base prose-headings:scroll-mt-16 prose-headings:tracking-tight prose-h2:mt-6 prose-h2:border-b prose-h2:pb-3 first:prose-h2:mt-10 prose-a:decoration-primary prose-a:underline-offset-2 hover:prose-a:text-primary prose-pre:text-lg lg:prose-pre:text-base"
         >
           <div v-if="page?.image">
             <NuxtImg

app/pages/docs/[...slug].vue

@@ -18,7 +18,7 @@
       <div class="xl:grid xl:grid-cols-[1fr,250px] xl:gap-5">
         <!-- Page content -->
         <div
-          class="prose prose-lg prose-rose dark:prose-invert lg:prose-base prose-headings:scroll-mt-16 prose-headings:tracking-tight prose-h2:mt-6 prose-h2:border-b prose-h2:pb-3 first:prose-h2:mt-10 prose-a:decoration-primary prose-a:underline-offset-2 hover:prose-a:text-primary prose-pre:text-lg lg:prose-pre:text-base mx-auto w-full min-w-0 max-w-none py-5"
+          class="prose prose-lg prose-rose mx-auto w-full min-w-0 max-w-none py-5 dark:prose-invert lg:prose-base prose-headings:scroll-mt-16 prose-headings:tracking-tight prose-h2:mt-6 prose-h2:border-b prose-h2:pb-3 first:prose-h2:mt-10 prose-a:decoration-primary prose-a:underline-offset-2 hover:prose-a:text-primary prose-pre:text-lg lg:prose-pre:text-base"
         >
           <div v-if="pagePending">
             <UiSkeleton class="h-[calc(100dvh-57px)] w-full" />

app/pages/index.vue

@@ -68,7 +68,7 @@
           style="transform: translate(-20%, 0)"
         ></div>
         <div
-          class="bg-cider absolute h-[40rem] w-[40rem] rounded-full"
+          class="absolute h-[40rem] w-[40rem] rounded-full bg-cider"
           style="transform: translate(10%, -35%)"
         ></div>
         <div
@@ -109,12 +109,11 @@
             :class="[isUwu ? 'md:justify-start md:text-left' : '']"
           >
             <NuxtLink to="/downloads">
-              <UiButton size="lg">Get Cider</UiButton>
+              <UiButton>Get Cider</UiButton>
             </NuxtLink>
             <NuxtLink to="/learn-more">
               <UiButton
                 type="button"
-                size="lg"
                 variant="ghost"
                 class="learn-more hover:gap-5 hover:bg-transparent hover:underline"
               >

app/pages/legal/[...slug].vue

@@ -23,7 +23,7 @@
     <div class="flex flex-col">
       <!-- <p class="mb-3 font-semibold text-primary">Legal</p> -->
       <ContentRenderer
-        class="prose prose-rose dark:prose-invert max-w-screen-md lg:max-w-screen-lg"
+        class="prose prose-rose max-w-screen-md dark:prose-invert lg:max-w-screen-lg"
         :value="page"
       />
     </div>

nuxt.config.ts

@@ -157,4 +157,4 @@ export default defineNuxtConfig({
   },
 
   compatibilityDate: "2024-11-01",
-});
+});

package.json

@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@morev/vue-transitions": "^3.0.5",
-    "@nuxt/content": "^2.13.4",
+    "@nuxt/content": "npm:@nuxt/content-edge@latest",
     "@nuxt/fonts": "^0.10.3",
     "@nuxt/image": "^1.9.0",
     "@nuxtjs/seo": "2.0.3",

pnpm-lock.yaml

@@ -138,5 +138,9 @@ module.exports = {
       },
     },
   },
-  plugins: [require("tailwindcss-animate"), require("@tailwindcss/forms")({ strategy: "class" })],
+  plugins: [
+    require("tailwindcss-animate"),
+    require("@tailwindcss/forms")({ strategy: "class" }),
+    require("@tailwindcss/typography"),
+  ],
 };