From 1d172b800c3e8de372b7d63233972eb4763c89da Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Tue, 3 Oct 2023 13:33:47 +0300
Subject: [PATCH] Add tailwind and css module docs

---
 doc/theming/CSSModulesDoc.vue |  7 +++++--
 doc/theming/TailwindDoc.vue   | 30 ++++++++++++++++++++++++++++++
 pages/theming/index.vue       |  6 ++++++
 3 files changed, 41 insertions(+), 2 deletions(-)
 create mode 100644 doc/theming/TailwindDoc.vue

diff --git a/doc/theming/CSSModulesDoc.vue b/doc/theming/CSSModulesDoc.vue
index 10ee56357..d305e7a5b 100644
--- a/doc/theming/CSSModulesDoc.vue
+++ b/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: `
-<template>
+                basic: `<template>
     <InputText :class="$style.myinput" placeholder="Search" />
 </template>`
             }
diff --git a/doc/theming/TailwindDoc.vue b/doc/theming/TailwindDoc.vue
new file mode 100644
index 000000000..f9a8aabe0
--- /dev/null
+++ b/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>
diff --git a/pages/theming/index.vue b/pages/theming/index.vue
index 0c03d8c0b..77314d6aa 100755
--- a/pages/theming/index.vue
+++ b/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',