From 1b120c9e1a0eb285033f8fa7c57c207050d21881 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Wed, 25 Oct 2023 06:17:40 +0300
Subject: [PATCH] Updated docs for module and Tailwimd

---
 assets/menu/menu.json                       |  3 +-
 doc/nuxt/configuration/CSSLayerOrderDoc.vue | 36 ++++++++++++++++
 doc/nuxt/configuration/ComponentsDoc.vue    |  2 +-
 doc/nuxt/configuration/ImportPTDoc.vue      | 47 +++++++++++++++++++++
 doc/tailwind/CSSLayerDoc.vue                |  4 ++
 pages/nuxt/index.vue                        | 12 ++++++
 6 files changed, 101 insertions(+), 3 deletions(-)
 create mode 100644 doc/nuxt/configuration/CSSLayerOrderDoc.vue
 create mode 100644 doc/nuxt/configuration/ImportPTDoc.vue

diff --git a/assets/menu/menu.json b/assets/menu/menu.json
index ab7e6b654..e4021cf7a 100644
--- a/assets/menu/menu.json
+++ b/assets/menu/menu.json
@@ -493,8 +493,7 @@
         {
             "name": "Tailwind",
             "icon": "pi pi-heart",
-            "to": "/tailwind",
-            "badge": "NEW"
+            "to": "/tailwind"
         },
         {
             "name": "Figma UI Kit",
diff --git a/doc/nuxt/configuration/CSSLayerOrderDoc.vue b/doc/nuxt/configuration/CSSLayerOrderDoc.vue
new file mode 100644
index 000000000..4d1b81a57
--- /dev/null
+++ b/doc/nuxt/configuration/CSSLayerOrderDoc.vue
@@ -0,0 +1,36 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Defines the CSS layer order setting for compatibility with libraries like Tailwind.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code1" importCode hideToggleCode hideCodeSandbox hideStackBlitz />
+    <DocSectionCode :code="code2" importCode hideToggleCode hideCodeSandbox hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code1: {
+                basic: `
+primevue: { 
+    cssLayerOrder: 'tailwind-base, primevue, tailwind-utilities'
+}
+`
+            },
+            code2: {
+                basic: `
+/* tailwind.css */
+@layer tailwind-base {
+  @tailwind base;
+}
+
+@layer tailwind-utilities {
+  @tailwind components;
+  @tailwind utilities;
+}
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/nuxt/configuration/ComponentsDoc.vue b/doc/nuxt/configuration/ComponentsDoc.vue
index ebbb1e944..32201b5f1 100644
--- a/doc/nuxt/configuration/ComponentsDoc.vue
+++ b/doc/nuxt/configuration/ComponentsDoc.vue
@@ -53,7 +53,7 @@ primevue: {
     components: {
         name: ({ name, as, from }) => {
             return name === 'Button' ? \`My\${name}\` : name;
-        }
+        },
         include: ['Button', 'DataTable']    /* Used as <MyButton /> and <DataTable /> */
     }
 }
diff --git a/doc/nuxt/configuration/ImportPTDoc.vue b/doc/nuxt/configuration/ImportPTDoc.vue
new file mode 100644
index 000000000..ae2588dd8
--- /dev/null
+++ b/doc/nuxt/configuration/ImportPTDoc.vue
@@ -0,0 +1,47 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Configures the global pass through import path.</p>
+
+        <DocSectionCode :code="code1" importCode hideToggleCode hideCodeSandbox hideStackBlitz />
+        <p>The path may also be a location within your application.</p>
+        <DocSectionCode :code="code2" importCode hideToggleCode hideCodeSandbox hideStackBlitz />
+        <DocSectionCode :code="code3" importCode hideToggleCode hideCodeSandbox hideStackBlitz />
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code1: {
+                basic: `
+primevue: { 
+    importPT: { as: 'Tailwind', from: 'primevue/passthrough/tailwind' },
+}
+`
+            },
+            code2: {
+                basic: `
+primevue: { 
+    importPT: { as: 'MyCustomPreset', from: path.resolve(__dirname, './assets/presets/mypreset.js')}
+}
+`
+            },
+            code3: {
+                basic: `
+const MyPreset = {
+    ...
+    button: {
+        root: 'my-button',
+       ...
+    },
+    ...
+}
+
+export default MyPreset;
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/tailwind/CSSLayerDoc.vue b/doc/tailwind/CSSLayerDoc.vue
index a8114845a..754d92998 100644
--- a/doc/tailwind/CSSLayerDoc.vue
+++ b/doc/tailwind/CSSLayerDoc.vue
@@ -4,6 +4,10 @@
             Tailwind CSS can be used with styled or unstyled modes of PrimeVue. In both cases, <a href="https://tailwindcss.com/docs/preflight" target="_blank" rel="noopener noreferrer">preflight</a> mode may break styling of the core functionality
             so <i>@layer</i> configuration in your style file that includes tailwind styles is necessary for compatibility.
         </p>
+        <p>
+            If you are using <strong>Nuxt</strong> modules of <NuxtLink to="/nuxt">PrimeVue</NuxtLink> and <a href="https://tailwindcss.nuxtjs.org/" target="_blank" rel="noopener noreferrer">Tailwind</a>, the layer order is required to be configured
+            with the <NuxtLink to="/nuxt/#layerorder">cssLayerOrder</NuxtLink>.
+        </p>
     </DocSectionText>
     <DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz />
 </template>
diff --git a/pages/nuxt/index.vue b/pages/nuxt/index.vue
index 90b9490c3..5d8b7051a 100644
--- a/pages/nuxt/index.vue
+++ b/pages/nuxt/index.vue
@@ -23,9 +23,11 @@ import DownloadDoc from '@/doc/nuxt/DownloadDoc.vue';
 import ExampleDoc from '@/doc/nuxt/ExampleDoc.vue';
 import SetupDoc from '@/doc/nuxt/SetupDoc.vue';
 import StyleDoc from '@/doc/nuxt/StyleDoc.vue';
+import CSSLayerOrderDoc from '@/doc/nuxt/configuration/CSSLayerOrderDoc.vue';
 import ComponentsDoc from '@/doc/nuxt/configuration/ComponentsDoc.vue';
 import ComposablesDoc from '@/doc/nuxt/configuration/ComposablesDoc.vue';
 import DirectivesDoc from '@/doc/nuxt/configuration/DirectivesDoc.vue';
+import ImportPTDoc from '@/doc/nuxt/configuration/ImportPTDoc.vue';
 import OptionsDoc from '@/doc/nuxt/configuration/OptionsDoc.vue';
 import UsePrimeVueDoc from '@/doc/nuxt/configuration/UsePrimeVueDoc.vue';
 import VideoDoc from '../../doc/nuxt/VideoDoc.vue';
@@ -72,6 +74,16 @@ export default {
                             id: 'composables',
                             label: 'composables',
                             component: ComposablesDoc
+                        },
+                        {
+                            id: 'importpt',
+                            label: 'importPT',
+                            component: ImportPTDoc
+                        },
+                        {
+                            id: 'layerorder',
+                            label: 'cssLayerOrder',
+                            component: CSSLayerOrderDoc
                         }
                     ]
                 },