Add tailwind and css module docs

doc/theming/CSSModulesDoc.vue

@@ -10,6 +10,10 @@
     </div>
     <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
     <DocSectionCode :code="code2" hideToggleCode hideCodeSandbox hideStackBlitz />
+    <p>An in-depth video tutorial is available to cover advanced uses cases with Pass Through props.</p>
+    <div class="video-container">
+        <iframe width="560" height="315" src="https://www.youtube.com/embed/n5zvMo7ykgw?si=lw1dGEHclmhIfZTr" frameborder="0" allowfullscreen></iframe>
+    </div>
 </template>
 
 <script>
@@ -29,8 +33,7 @@ export default {
             },
 
             code2: {
-                basic: `
+                basic: `<template>
-<template>
     <InputText :class="$style.myinput" placeholder="Search" />
 </template>`
             }

doc/theming/TailwindDoc.vue

@@ -0,0 +1,30 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            Tailwind CSS can be used with styled or unstyled modes of PrimeVue. For unstyled mode, visit the exclusive <PrimeVueNuxtLink to="/tailwind">Tailwind</PrimeVueNuxtLink> documentation. In styled mode, preflight mode may override the default
+            styles of the components so <i>@layer</i> configuration in your style file that includes tailwind styles is necesssary for compatibility. Note that, this is only required when you are using PrimeVue in styled mode.
+        </p>
+    </DocSectionText>
+    <DocSectionCode :code="code" hideToggleCode hideCodeSandbox hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `@layer tailwind-base, primevue, tailwind-utilities;
+
+@layer tailwind-base {
+  @tailwind base;
+}
+
+@layer tailwind-utilities {
+  @tailwind utilities;
+  @tailwind variants;
+}`
+            }
+        };
+    }
+};
+</script>

pages/theming/index.vue

@@ -28,6 +28,7 @@ import PrimeFlexDoc from '@/doc/theming/PrimeFlexDoc.vue';
 import ScaleDoc from '@/doc/theming/ScaleDoc.vue';
 import ScopedCSSDoc from '@/doc/theming/ScopedCSSDoc.vue';
 import SwitchThemesDoc from '@/doc/theming/SwitchThemesDoc.vue';
+import TailwindDoc from '@/doc/theming/TailwindDoc.vue';
 import UtilsDoc from '@/doc/theming/UtilsDoc.vue';
 
 export default {
@@ -74,6 +75,11 @@ export default {
                     label: 'PrimeFlex',
                     component: PrimeFlexDoc
                 },
+                {
+                    id: 'tailwind',
+                    label: 'Tailwind',
+                    component: TailwindDoc
+                },
                 {
                     id: 'utils',
                     label: 'Utils',