From de31066532c12a942b727226b5367c63be42f11e Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Tue, 29 Oct 2024 13:42:31 +0300
Subject: [PATCH] Update docs

---
 apps/showcase/assets/menu/menu.json           | 25 ++++++-------------
 apps/showcase/doc/tailwind/OverviewDoc.vue    |  6 ++++-
 apps/showcase/doc/tailwind/PresetsDoc.vue     | 15 -----------
 .../doc/tailwind/TailwindThemeDoc.vue         | 10 ++++++++
 .../doc/tailwind/samples/ColorPaletteDoc.vue  | 20 +++++++--------
 .../theming/unstyled/pure/PureExampleDoc.vue  |  3 +--
 apps/showcase/pages/tailwind/index.vue        |  8 +++---
 7 files changed, 37 insertions(+), 50 deletions(-)
 delete mode 100644 apps/showcase/doc/tailwind/PresetsDoc.vue
 create mode 100644 apps/showcase/doc/tailwind/TailwindThemeDoc.vue

diff --git a/apps/showcase/assets/menu/menu.json b/apps/showcase/assets/menu/menu.json
index 1b532f34d..ffc9acd21 100644
--- a/apps/showcase/assets/menu/menu.json
+++ b/apps/showcase/assets/menu/menu.json
@@ -504,22 +504,8 @@
         },
         {
             "name": "Tailwind CSS",
-            "icon": "pi pi-heart",
-            "children": [
-                {
-                    "name": "Integration",
-                    "to": "/tailwind"
-                },
-                {
-                    "name": "Presets",
-                    "href": "https://tailwind.primevue.org"
-                }
-            ]
-        },
-        {
-            "name": "Figma UI Kit",
-            "icon": "pi pi-pencil",
-            "to": "/uikit"
+            "icon": "pi pi-star",
+            "to": "/tailwind"
         },
         {
             "name": "Icons",
@@ -535,9 +521,14 @@
                 }
             ]
         },
+        {
+            "name": "Figma UI Kit",
+            "icon": "pi pi-pencil",
+            "to": "/uikit"
+        },
         {
             "name": "Templates",
-            "icon": "pi pi-star",
+            "icon": "pi pi-heart",
             "to": "/templates"
         },
         {
diff --git a/apps/showcase/doc/tailwind/OverviewDoc.vue b/apps/showcase/doc/tailwind/OverviewDoc.vue
index c5d8c4319..e044867d3 100644
--- a/apps/showcase/doc/tailwind/OverviewDoc.vue
+++ b/apps/showcase/doc/tailwind/OverviewDoc.vue
@@ -7,9 +7,13 @@
         </p>
         <p>
             Tailwind is an outstanding CSS library, however it lacks a true comprehensive UI suite when combined with Vue.js, this is where PrimeVue comes in by providing a wide range of highly accessible and feature rich UI component library. The
-            core of PrimeVue does not depend on Tailwind CSS, instead we provide the necessary integration points such as the primeui tailwind plugin and the presets for the unstyled mode.
+            core of PrimeVue does not depend on Tailwind CSS, instead we provide the necessary integration points such as the primeui tailwind plugin and the Tailwind version for the unstyled mode.
         </p>
     </DocSectionText>
+    <div class="doc-notification">
+        Tailwind CSS and PrimeVue can be used together via two main approaches. Simple approach is using Tailwind CSS <b>around</b> PrimeVue components for layout purposes as demonstrated in the samples section below, the advanced approach takes the
+        integration a step further by allowing Tailwind CSS <b>within</b> the component internals to style the entire UI suite in <NuxtLink to="/theming/unstyled" class="doc-link">unstyled mode</NuxtLink>.
+    </div>
 </template>
 
 <script></script>
diff --git a/apps/showcase/doc/tailwind/PresetsDoc.vue b/apps/showcase/doc/tailwind/PresetsDoc.vue
deleted file mode 100644
index 6e30fa344..000000000
--- a/apps/showcase/doc/tailwind/PresetsDoc.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <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.
-        </p>
-        <p>
-            The unstyled mode also use the <i>preset</i> concept just like the styled mode to define a theme. In styled mode a preset is a set of design tokens implemented with CSS variables whereas in unstyled mode a preset is a Pass-Through
-            configuration object to inject Tailwind CSS classes into components. If you prefer to ignore the default styled mode theming api and use Tailwind CSS to style the PrimeVue UI components instead, learn more at the standalone
-            <a href="https://tailwind.primevue.org/" target="_blank" rel="noopener noreferrer">Tailwind CSS Presets</a> project website.
-        </p>
-    </DocSectionText>
-</template>
-
-<script></script>
diff --git a/apps/showcase/doc/tailwind/TailwindThemeDoc.vue b/apps/showcase/doc/tailwind/TailwindThemeDoc.vue
new file mode 100644
index 000000000..49868d3af
--- /dev/null
+++ b/apps/showcase/doc/tailwind/TailwindThemeDoc.vue
@@ -0,0 +1,10 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            PrimeTek offers the Tailwind CSS version of the entire PrimeVue UI suite in <NuxtLink to="/theming/unstyled" class="doc-link">unstyled mode</NuxtLink> based on the <i>@apply</i> directive with IntelliSense support. Visit the
+            <a href="https://tailwind.primevue.org" target="_blank" rel="noopener noreferrer">Tailwind version of PrimeVue</a> for the documentation, demos and additional resources.
+        </p>
+    </DocSectionText>
+</template>
+
+<script></script>
diff --git a/apps/showcase/doc/tailwind/samples/ColorPaletteDoc.vue b/apps/showcase/doc/tailwind/samples/ColorPaletteDoc.vue
index 5f7c8e8e4..ff07bf6fb 100644
--- a/apps/showcase/doc/tailwind/samples/ColorPaletteDoc.vue
+++ b/apps/showcase/doc/tailwind/samples/ColorPaletteDoc.vue
@@ -23,6 +23,7 @@
             </div>
         </div>
     </div>
+    <DocSectionCode :code="code" hideToggleCode hideStackBlitz />
 </template>
 
 <script>
@@ -31,18 +32,15 @@ export default {
         return {
             shades: [0, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950],
             colors: ['primary', 'surface'],
-            code1: {
+            code: {
                 basic: `
-npm i tailwindcss-primeui
-`
-            },
-            code2: {
-                basic: `
-// tailwind.config.js
-module.exports = {
-    // ...
-    plugins: [require('tailwindcss-primeui')]
-};
+<div class="flex flex-col gap-12">
+    <div class="flex gap-6 flex-wrap">
+        <div class="rounded-border p-4 border border-transparent flex items-center justify-center bg-primary hover:bg-primary-emphasis text-primary-contrast font-medium flex-auto transition-colors">primary</div>
+        <div class="rounded-border p-4 border border-transparent flex items-center justify-center bg-highlight hover:bg-highlight-emphasis font-medium flex-auto transition-colors">highlight</div>
+        <div class="rounded-border p-4 border border-surface flex items-center justify-center text-muted-color hover:text-color hover:bg-emphasis font-medium flex-auto transition-colors">box</div>
+    </div>
+</div>
 `
             }
         };
diff --git a/apps/showcase/doc/theming/unstyled/pure/PureExampleDoc.vue b/apps/showcase/doc/theming/unstyled/pure/PureExampleDoc.vue
index 348b42061..c7ac63837 100644
--- a/apps/showcase/doc/theming/unstyled/pure/PureExampleDoc.vue
+++ b/apps/showcase/doc/theming/unstyled/pure/PureExampleDoc.vue
@@ -30,8 +30,7 @@ export default {
     unstyled
     pt:root="bg-teal-500 hover:bg-teal-700 active:bg-teal-900 cursor-pointer py-2 px-4 rounded-full border-0 flex gap-2"
     pt:label="text-white font-bold text-lg"
-    pt:icon="
-    "
+    pt:icon="text-white text-xl"
 />
 `
             }
diff --git a/apps/showcase/pages/tailwind/index.vue b/apps/showcase/pages/tailwind/index.vue
index 680243671..9ed85a906 100644
--- a/apps/showcase/pages/tailwind/index.vue
+++ b/apps/showcase/pages/tailwind/index.vue
@@ -21,7 +21,7 @@ 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';
+import TailwindThemeDoc from '@/doc/tailwind/TailwindThemeDoc.vue';
 import ColorPaletteDoc from '@/doc/tailwind/samples/ColorPaletteDoc.vue';
 import FormDoc from '@/doc/tailwind/samples/FormDoc.vue';
 import HeadlessDoc from '@/doc/tailwind/samples/HeadlessDoc.vue';
@@ -36,9 +36,9 @@ export default {
                     component: OverviewDoc
                 },
                 {
-                    id: 'presets',
-                    label: 'Presets',
-                    component: PresetsDoc
+                    id: 'tailwind-theme',
+                    label: 'Tailwind Theme',
+                    component: TailwindThemeDoc
                 },
                 {
                     id: 'plugin',