Updated docs for module and Tailwimd

assets/menu/menu.json

@@ -493,8 +493,7 @@
         {
             "name": "Tailwind",
             "icon": "pi pi-heart",
-            "to": "/tailwind",
-            "badge": "NEW"
+            "to": "/tailwind"
         },
         {
             "name": "Figma UI Kit",

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>

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 /> */
     }
 }

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>

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>

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
                         }
                     ]
                 },