Doc update on PT and cosmetic on hero section

components/landing/HeroSection.vue

@@ -7,8 +7,8 @@
                     target="_blank"
                     rel="noopener noreferrer"
                     style="border-radius: 50px"
-                    class="bg-yellow-300 border-1 border-yellow-400 text-yellow-900 py-1 px-3 xl:align-self-start font-semibold text-lg transition-colors transition-duration-300 hover:border-yellow-600"
+                    class="bg-yellow-300 border-1 border-yellow-400 text-yellow-900 py-1 px-3 xl:align-self-start font-semibold transition-colors transition-duration-300 hover:border-yellow-600 text-base sm:text-lg"
-                    >🎉 Introducing the Tailwind CSS Presets <i class="pi pi-arrow-right text-sm"></i
+                    >🎉 Introducing the Tailwind Presets <i class="pi pi-arrow-right text-sm"></i
                 ></a>
                 <h1 class="text-6xl font-bold text-center xl:text-left">The Next-Gen UI Suite for <span class="font-bold text-primary">Vue.js</span></h1>
                 <p class="section-detail xl:text-left text-center px-0 mt-0 mb-5">
@@ -141,6 +141,12 @@
                                         menuButton: {
                                             width: 'auto',
                                             root: 'p-2'
+                                        },
+                                        menu: {
+                                            root: {
+                                                style: 'width: 10rem; min-width: auto',
+                                            },
+                                            action: 'p-2'
                                         }
                                     }"
                                 />

doc/passthrough/UsePassThroughDoc.vue

@@ -1,8 +1,7 @@
 <template>
     <DocSectionText v-bind="$attrs">
         <p>
-            An existing pass through configuration is customized with the <i>usePassThrough</i> utility. The first parameter is the object to customize, the second parameter is the customizations and the final parameter is the behavior of merging.
+            An existing pass through configuration is customized with the <i>usePassThrough</i> utility. The first parameter is the object to customize, the second parameter is the customizations and the final parameter is the merge strategy.
-            One of the example use cases is customizing existing unstyled themes like Tailwind.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
         <p>
@@ -22,15 +21,15 @@ export default {
         return {
             code1: {
                 basic: `
-import {createApp} from "vue";
+import { createApp } from "vue";
 import PrimeVue from "primevue/config";
 import { usePassThrough } from "primevue/passthrough";
-import Tailwind from "primevue/passthrough/tailwind";
+import BasePreset from "./basepreset";
 
 const app = createApp(App);
 
-const CustomTailwind = usePassThrough(
+const CustomPreset = usePassThrough(
-    Tailwind,
+    BasePreset,
     {
         panel: {
             title: {
@@ -44,13 +43,13 @@ const CustomTailwind = usePassThrough(
     }
 );
 
-app.use(PrimeVue, { unstyled: true, pt: CustomTailwind });
+app.use(PrimeVue, { unstyled: true, pt: CustomPreset });
 `
             },
             code2: {
                 basic: `
-const CustomTailwind = usePassThrough(
+const CustomPreset = usePassThrough(
-    Tailwind,
+    BasePreset,
     {
         panel: {
             header: 'my_panel_header'
@@ -66,8 +65,8 @@ const CustomTailwind = usePassThrough(
             },
             code3: {
                 basic: `
-const CustomTailwind = usePassThrough(
+const CustomPreset = usePassThrough(
-    Tailwind,
+    BasePreset,
     {
         panel: {
             header: 'my_panel_header'
@@ -83,8 +82,8 @@ const CustomTailwind = usePassThrough(
             },
             code4: {
                 basic: `
-const CustomTailwind = usePassThrough(
+const CustomPreset = usePassThrough(
-    Tailwind,
+    BasePreset,
     {
         panel: {
             header: 'my_panel_header'
@@ -99,8 +98,9 @@ const CustomTailwind = usePassThrough(
 `
             },
             code5: {
-                basic: `const CustomTailwind = usePassThrough(
+                basic: `
-    Tailwind,
+const CustomPreset = usePassThrough(
+    BasePreset,
     {
         panel: {
             header: 'my_panel_header'