From 09c1a9a776447466d85d25bf1a110f3ee21f9613 Mon Sep 17 00:00:00 2001
From: mertsincan <sincan.mert@gmail.com>
Date: Thu, 10 Aug 2023 23:52:39 +0100
Subject: [PATCH] Update CustomizationDoc.vue

---
 doc/tailwind/CustomizationDoc.vue | 28 +++++++++++++++++++---------
 1 file changed, 19 insertions(+), 9 deletions(-)

diff --git a/doc/tailwind/CustomizationDoc.vue b/doc/tailwind/CustomizationDoc.vue
index 24ffb2a11..a3467a42d 100644
--- a/doc/tailwind/CustomizationDoc.vue
+++ b/doc/tailwind/CustomizationDoc.vue
@@ -6,10 +6,7 @@
         </p>
     </DocSectionText>
     <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
-    <p>
-        Let's assume the <i>title</i> section should be lighter and bigger. To begin with, clone the Tailwind theme to create your own, override the default values with your own utility classes and finally configure your own theme object as the
-        <i>pt</i> of PrimeVue.
-    </p>
+    <p>Let's assume the <i>title</i> section should be lighter and bigger.</p>
     <DocSectionCode :code="code2" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
 
@@ -52,17 +49,30 @@ export default {
             code2: {
                 basic: `import {createApp} from "vue";
 import PrimeVue from "primevue/config";
+import { usePassThrough } from "primevue/passthrough";
 import Tailwind from "primevue/passthrough/tailwind";
 
 const app = createApp(App);
 
 //Tailwind customization
-const CustomTailwindTheme = {...Tailwind};
-CustomTailwindTheme.panel.title = {
-    class: ['leading-none font-light text-2xl']
-}
+const CustomTailwind = usePassThrough(
+    Tailwind,
+    {
+        panel: {
+            title: {
+                class: ['leading-none font-light text-2xl']
+            }
+        }
+    },
+    {
+        merge: true,             // Used to merge PT options. Default is true.
+        useMergeProps: false,    // Whether to use Vue's 'mergeProps' method to merge PT options.
+        ignoredKeysOnMerge: [],  // Defines keys to ignore during merge operation. For example; ['panel.title']
+        customizer: undefined    // Defines the custom method to merge PT options.
+    }
+);
 
-app.use(PrimeVue, { unstyled: true, pt: CustomTailwindTheme });`
+app.use(PrimeVue, { unstyled: true, pt: CustomTailwind });`
             }
         };
     }