From ffc1dc6754d71a4e5f3a10971a382dd20744cbce Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Wed, 2 Aug 2023 10:41:24 +0300
Subject: [PATCH] Update doc to add purge

---
 doc/tailwind/SetupDoc.vue | 20 ++++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/doc/tailwind/SetupDoc.vue b/doc/tailwind/SetupDoc.vue
index 90a1659b1..85fdbfe33 100644
--- a/doc/tailwind/SetupDoc.vue
+++ b/doc/tailwind/SetupDoc.vue
@@ -5,16 +5,21 @@
             The built-in default theme is basically a <PrimeVueNuxtLink to="/passthrough">global pass through</PrimeVueNuxtLink> configuration that needs to be imported from <i>primevue/tailwind</i> path and then defined during setup. Since the theme
             is exclusive to unstyled mode, the <i>unstyled</i> setting is required in addition.
         </p>
+        <DocSectionCode :code="code1" hideToggleCode hideCodeSandbox hideStackBlitz />
+        <p>
+            Tailwind uses PurgeCSS internally to remove unused classes, since PrimeVue components are loaded from node_modules the <i>content</i> property at <i>tailwind.config.js</i> needs to be aware of PrimeVue, otherwise the classes utilized in
+            the theme will be removed as well.
+        </p>
+        <DocSectionCode :code="code2" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
         <p>Voilà 💚, you now have 90+ awesome Vue UI components styled with Tailwind that will work in harmony with the rest of your application.</p>
     </DocSectionText>
-    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
 
 <script>
 export default {
     data() {
         return {
-            code: {
+            code1: {
                 basic: `import {createApp} from "vue";
 import PrimeVue from "primevue/config";
 import Tailwind from "primevue/tailwind";
@@ -22,6 +27,17 @@ import Tailwind from "primevue/tailwind";
 const app = createApp(App);
 
 app.use(PrimeVue, { unstyled: true, pt: Tailwind });`
+            },
+            code2: {
+                basic: `export default {
+    ...
+    content: [
+        "./index.html",
+        "./src/**/*.{vue,js,ts,jsx,tsx}",
+        "./node_modules/primevue/**/*.{vue,js,ts,jsx,tsx}"
+    ],
+    ...
+}`
             }
         };
     }