Update docs

apps/showcase/assets/menu/menu.json

@@ -504,23 +504,9 @@
         },
         {
             "name": "Tailwind CSS",
-            "icon": "pi pi-heart",
+            "icon": "pi pi-star",
-            "children": [
-                {
-                    "name": "Integration",
             "to": "/tailwind"
         },
-                {
-                    "name": "Presets",
-                    "href": "https://tailwind.primevue.org"
-                }
-            ]
-        },
-        {
-            "name": "Figma UI Kit",
-            "icon": "pi pi-pencil",
-            "to": "/uikit"
-        },
         {
             "name": "Icons",
             "icon": "pi pi-eye",
@@ -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"
         },
         {

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>

apps/showcase/doc/tailwind/PresetsDoc.vue

@@ -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>

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>

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
+<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>
-            code2: {
+        <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>
-                basic: `
+        <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>
-// tailwind.config.js
+    </div>
-module.exports = {
+</div>
-    // ...
-    plugins: [require('tailwindcss-primeui')]
-};
 `
             }
         };

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"
-    "
 />
 `
             }

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',
+                    id: 'tailwind-theme',
-                    label: 'Presets',
+                    label: 'Tailwind Theme',
-                    component: PresetsDoc
+                    component: TailwindThemeDoc
                 },
                 {
                     id: 'plugin',