From abc8676c463072832ac5a48def0f6a01b39ab0ee Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Thu, 13 Jun 2024 08:48:27 +0300
Subject: [PATCH] Update TW doc

---
 apps/showcase/assets/styles/layout/_doc.scss |  1 +
 apps/showcase/doc/tailwind/OverrideDoc.vue   | 61 ++++++++++++++++++++
 apps/showcase/doc/tailwind/PresetsDoc.vue    |  1 +
 apps/showcase/pages/tailwind/index.vue       | 12 +++-
 4 files changed, 72 insertions(+), 3 deletions(-)
 create mode 100644 apps/showcase/doc/tailwind/OverrideDoc.vue
diff --git a/apps/showcase/assets/styles/layout/_doc.scss b/apps/showcase/assets/styles/layout/_doc.scss
index 7f1c58249..c7fabb4d4 100644
--- a/apps/showcase/assets/styles/layout/_doc.scss
+++ b/apps/showcase/assets/styles/layout/_doc.scss
@@ -162,6 +162,7 @@
     border-radius: 10px;
     background: var(--mark-background);
     color: var(--mark-text);
+    margin-bottom: 1rem;
 }
 
 .doc-section-nav {
diff --git a/apps/showcase/doc/tailwind/OverrideDoc.vue b/apps/showcase/doc/tailwind/OverrideDoc.vue
new file mode 100644
index 000000000..d09154887
--- /dev/null
+++ b/apps/showcase/doc/tailwind/OverrideDoc.vue
@@ -0,0 +1,61 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>In styled mode, Tailwind utilities may not be able to override the default styling due to css specificity, there are two possible solutions.</p>
+        <h3>Important</h3>
+        <p>Use the <i>!</i> as a prefix to enforce the styling.</p>
+        <DocSectionCode :code="code1" hideToggleCode hideStackBlitz />
+
+        <h3>CSS Layer</h3>
+        <p>
+            Enable PrimeVue CSS layer and configure the tailwind styles to have higher specificity with layering. This way, <i>!</i> prefix is not required. If you are using Nuxt, there is a
+            <NuxtLink to="/nuxt/#layerorder">cssLayerOrder</NuxtLink> property to define the order.
+        </p>
+        <DocSectionCode :code="code2" importCode hideToggleCode hideStackBlitz />
+        <DocSectionCode :code="code3" importCode hideToggleCode hideStackBlitz />
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code1: {
+                basic: `
+<InputText placeholder="Overriden" class="!p-8" />
+`
+            },
+            code2: {
+                basic: `
+import PrimeVue from 'primevue/config';
+import Aura from '@primevue/themes/aura';
+
+const app = createApp(App);
+
+app.use(PrimeVue, {
+    theme: {
+        preset: Aura,
+        options: {
+            cssLayer: true
+        }
+    }
+ });
+`
+            },
+            code3: {
+                basic: `
+@layer tailwind-base, primevue, tailwind-utilities;
+
+@layer tailwind-base {
+  @tailwind base;
+}
+
+@layer tailwind-utilities {
+  @tailwind components;
+  @tailwind utilities;
+}
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/showcase/doc/tailwind/PresetsDoc.vue b/apps/showcase/doc/tailwind/PresetsDoc.vue
index 6e30fa344..869bf67a6 100644
--- a/apps/showcase/doc/tailwind/PresetsDoc.vue
+++ b/apps/showcase/doc/tailwind/PresetsDoc.vue
@@ -1,5 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
+        <div class="doc-notification">Currently, the Tailwind CSS Presets are not compatible with v4 and will be with a future update after v4 final.</div>
         <p>
             In unstyled mode of PrimeVue, default styling elements like design tokens and css classes are turned off so that you have full control over the component styling with pass-through properties. This feature is quite useful when you'd like
             to build your own UI library based on a custom design by wrapping PrimeVue components or simply utilitze Tailwind CSS to style the PrimeVue components.
diff --git a/apps/showcase/pages/tailwind/index.vue b/apps/showcase/pages/tailwind/index.vue
index b04131c6f..680243671 100644
--- a/apps/showcase/pages/tailwind/index.vue
+++ b/apps/showcase/pages/tailwind/index.vue
@@ -1,13 +1,13 @@
 <template>
     <Head>
         <Title>Tailwind CSS - PrimeVue</Title>
-        <Meta name="description" content="Integration between PrimeVue and Tailwind CSS" />
+        <Meta name="description" content="Integration between PrimeVue and Tailwind CSS both in styled and unstyled modes" />
     </Head>
     <div class="doc">
         <div class="doc-main">
             <div class="doc-intro">
                 <h1>Tailwind CSS</h1>
-                <p>Integration between PrimeVue and Tailwind CSS.</p>
+                <p>Integration between PrimeVue and Tailwind CSS both in styled and unstyled modes.</p>
             </div>
             <DocSections :docs="docs" />
         </div>
@@ -18,6 +18,7 @@
 <script>
 import AnimationsDoc from '@/doc/tailwind/AnimationsDoc.vue';
 import ExtensionsDoc from '@/doc/tailwind/ExtensionsDoc.vue';
+import OverrideDoc from '@/doc/tailwind/OverrideDoc.vue';
 import OverviewDoc from '@/doc/tailwind/OverviewDoc.vue';
 import PluginDoc from '@/doc/tailwind/PluginDoc.vue';
 import PresetsDoc from '@/doc/tailwind/PresetsDoc.vue';
@@ -41,7 +42,7 @@ export default {
                 },
                 {
                     id: 'plugin',
-                    label: 'PluginDoc',
+                    label: 'Plugin',
                     component: PluginDoc
                 },
                 {
@@ -49,6 +50,11 @@ export default {
                     label: 'Extensions',
                     component: ExtensionsDoc
                 },
+                {
+                    id: 'override',
+                    label: 'Override',
+                    component: OverrideDoc
+                },
                 {
                     id: 'samples',
                     label: 'Samples',
