Merge branch 'master' of https://github.com/primefaces/primevue

apps/showcase/assets/menu/menu.json

@@ -510,22 +510,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",
@@ -541,9 +527,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/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
-`
-            },
-            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>
 `
             }
         };

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