Update docs for Tailwind v4

apps/showcase/assets/menu/menu.json

@@ -500,8 +500,7 @@
         {
             "name": "Forms",
             "icon": "pi pi-check-circle",
-            "to": "/forms",
+            "to": "/forms"
-            "badge": "NEW"
         },
         {
             "name": "Pass Through",

apps/showcase/doc/tailwind/DarkModeDoc.vue

@@ -0,0 +1,60 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            In styled mode, PrimeVue uses the <i>system</i> as the default <i>darkModeSelector</i> in theme configuration. If you have a dark mode switch in your application, ensure that <i>darkModeSelector</i> is aligned with the Tailwind dark
+            variant for seamless integration. Note that, this particular configuration isn't required if you're utilizing the default system color scheme.
+        </p>
+        <p>Suppose that, the darkModeSelector is set as <i>my-app-dark</i> in PrimeVue.</p>
+        <DocSectionCode :code="code1" hideToggleCode importCode hideStackBlitz />
+        <h3>Tailwind v4</h3>
+        <p>Add a custom variant for dark with a custom selector.</p>
+        <DocSectionCode :code="code2" hideToggleCode importCode hideStackBlitz />
+        <h3>Tailwind v3</h3>
+        <p>Use the plugins option in your Tailwind config file to configure the plugin.</p>
+        <DocSectionCode :code="code3" hideToggleCode importCode hideStackBlitz />
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code1: {
+                basic: `
+import PrimeVue from 'primevue/config';
+import Aura from '@primeuix/themes/aura';
+
+const app = createApp(App);
+
+app.use(PrimeVue, {
+    theme: {
+        preset: Aura,
+        options: {
+            darkModeSelector: '.my-app-dark',
+        }
+    }
+ });
+`
+            },
+            code2: {
+                basic: `
+@import "tailwindcss";
+@import "tailwindcss-primeui";
+@custom-variant dark (&:where(.my-app-dark, .my-app-dark *));     //dark mode configuration
+`
+            },
+            code3: {
+                basic: `
+// tailwind.config.js
+import PrimeUI from 'tailwindcss-primeui';
+
+export default {
+    darkMode: ['selector', '[class~="my-app-dark"]'],           //dark mode configuration
+    plugins: [PrimeUI]
+};
+`
+            }
+        };
+    }
+};
+</script>

apps/showcase/doc/tailwind/ExtensionsDoc.vue

@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>The plugin extends the default configuration with a new set of utilities. All variants and breakpoints are supported e.g. <i>dark:sm:hover:bg-primary</i>.</p>
+        <p>The plugin extends the default configuration with a new set of utilities whose values are derived from the PrimeVue theme in use. All variants and breakpoints are supported e.g. <i>dark:sm:hover:bg-primary</i>.</p>
         <h3>Color Palette</h3>
         <div class="doc-tablewrapper">
             <table class="doc-table">

apps/showcase/doc/tailwind/OverrideDoc.vue

@@ -1,14 +1,29 @@
 <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>
+        <p>Tailwind utilities may not be able to override the default styling of components due to css specificity, there are two possible solutions; Import and CSS Layer.</p>
         <h3>Important</h3>
-        <p>Use the <i>!</i> as a prefix to enforce the styling.</p>
+        <p>Use the <i>!</i> as a prefix to enforce the styling. This is not the recommend approach, and should be used as last resort to avoid adding unnecessary style classes to your bundle.</p>
+
+        <h5>Tailwind v4</h5>
         <DocSectionCode :code="code1" hideToggleCode hideStackBlitz />
 
+        <h5>Tailwind v3</h5>
+        <DocSectionCode :code="code2" 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.</p>
+        <p>CSS Layer provides control over the css specificity so that Tailwind utilities can safely override components.</p>
-        <DocSectionCode :code="code2" importCode hideToggleCode hideStackBlitz />
+
+        <h5>Tailwind v4</h5>
+        <p>Ensure <i>primevue</i> layer is after <i>theme</i> and <i>base</i>, but before the other Tailwind layers such as <i>utilities</i>.</p>
         <DocSectionCode :code="code3" importCode hideToggleCode hideStackBlitz />
+        <p>No change in the CSS configuration is required.</p>
+        <DocSectionCode :code="code4" importCode hideToggleCode hideStackBlitz />
+
+        <h5>Tailwind v3</h5>
+        <p>The <i>primevue</i> layer should be between base and utilities.</p>
+        <DocSectionCode :code="code5" importCode hideToggleCode hideStackBlitz />
+        <p>Tailwind v3 does not use native <i>layer</i> so needs to be defined with CSS.</p>
+        <DocSectionCode :code="code6" importCode hideToggleCode hideStackBlitz />
     </DocSectionText>
 </template>
 
@@ -18,11 +33,42 @@ export default {
         return {
             code1: {
                 basic: `
-<InputText placeholder="Overriden" class="!p-8" />
+<InputText placeholder="Overriden" class="p-8!" />
 `
             },
             code2: {
                 basic: `
+<InputText placeholder="Overriden" class="!p-8" />
+`
+            },
+            code3: {
+                basic: `
+import PrimeVue from 'primevue/config';
+import Aura from '@primeuix/themes/aura';
+
+const app = createApp(App);
+
+app.use(PrimeVue, {
+    theme: {
+        preset: Aura,
+        options: {
+            cssLayer: {
+                name: 'primevue',
+                order: 'theme, base, primevue'
+            }
+        }
+    }
+ });
+`
+            },
+            code4: {
+                basic: `
+@import "tailwindcss";
+@import "tailwindcss-primeui";
+`
+            },
+            code5: {
+                basic: `
 import PrimeVue from 'primevue/config';
 import Aura from '@primeuix/themes/aura';
 
@@ -41,7 +87,7 @@ app.use(PrimeVue, {
  });
 `
             },
-            code3: {
+            code6: {
                 basic: `
 @layer tailwind-base, primevue, tailwind-utilities;
 

apps/showcase/doc/tailwind/PluginDoc.vue

@@ -6,15 +6,16 @@
             <i>text-surface-500</i>, <i>text-muted-color</i>.
         </p>
         <p>
-            If not completed already, begin with setting up Tailwind in your project. Visit the <a href="https://tailwindcss.com/" target="_blank" rel="noopener noreferrer">documentation</a> for the necessary steps. Once the Tailwind is installed
+            If you haven't already done so, start by integrating Tailwind into your project. Detailed steps for this process can be found in the Tailwind <a href="https://tailwindcss.com/" target="_blank" rel="noopener noreferrer">documentation</a>.
-            properly, install the primeui plugin.
+            After successfully installing Tailwind, proceed with the installation of the PrimeUI plugin. This single npm package comes with two libraries: the CSS version is compatible with Tailwind v4, while the JS version is designed for Tailwind
+            v3.
         </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideStackBlitz />
         <h3>Tailwind v4</h3>
         <p>In the CSS file that contains the tailwindcss import, add the <i>tailwindcss-primeui</i> import as well.</p>
         <DocSectionCode :code="code2" hideToggleCode importCode hideStackBlitz />
         <h3>Tailwind v3</h3>
-        <p>After installation, configure the plugin at your tailwind configuration file.</p>
+        <p>Use the plugins option in your Tailwind config file to configure the plugin.</p>
         <DocSectionCode :code="code3" hideToggleCode importCode hideStackBlitz />
     </DocSectionText>
 </template>
@@ -23,8 +24,6 @@
 export default {
     data() {
         return {
-            shades: [0, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950],
-            colors: ['primary', 'surface'],
             code1: {
                 basic: `
 npm i tailwindcss-primeui

apps/showcase/doc/tailwind/TailwindThemeDoc.vue

@@ -6,8 +6,8 @@
         </p>
     </DocSectionText>
     <div class="doc-notification">
-        Tailwind version of PrimeVue instead of the default styled mode is not tested with Tailwind v4. For the next-gen version with Tailwind v4, we aim to drop @apply based version in favor of a simplified pass-through approach where Tailwind
+        Tailwind version of PrimeVue instead of the default styled mode is not tested with Tailwind v4. For the next-gen version of this project, we are building a new UI Component library based on the code ownership model where components are
-        utilities are injected directly into PrimeVue component dom elements.
+        located inside your project source instead of imported from npm. This new library is powered by Unstyled PrimeVue Core and Tailwind v4.
     </div>
 </template>
 

apps/showcase/doc/tailwind/samples/StarterDoc.vue

@@ -0,0 +1,9 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            The Tailwind v4 and PrimeVue
+            <a href="https://github.com/primefaces/primevue-examples/tree/main/vite-tailwindv4" target="_blank" rel="noopener noreferrer">starter example</a>
+            is available to demonstrate the integration setup with an example dashboard.
+        </p>
+    </DocSectionText>
+</template>

apps/showcase/pages/tailwind/index.vue

@@ -17,6 +17,7 @@
 
 <script>
 import AnimationsDoc from '@/doc/tailwind/AnimationsDoc.vue';
+import DarkModeDoc from '@/doc/tailwind/DarkModeDoc.vue';
 import ExtensionsDoc from '@/doc/tailwind/ExtensionsDoc.vue';
 import OverrideDoc from '@/doc/tailwind/OverrideDoc.vue';
 import OverviewDoc from '@/doc/tailwind/OverviewDoc.vue';
@@ -25,6 +26,7 @@ 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';
+import StarterDoc from '@/doc/tailwind/samples/StarterDoc.vue';
 
 export default {
     data() {
@@ -50,6 +52,11 @@ export default {
                     label: 'Extensions',
                     component: ExtensionsDoc
                 },
+                {
+                    id: 'darkmode',
+                    label: 'Dark Mode',
+                    component: DarkModeDoc
+                },
                 {
                     id: 'override',
                     label: 'Override',
@@ -74,6 +81,11 @@ export default {
                             id: 'headless',
                             label: 'Headless',
                             component: HeadlessDoc
+                        },
+                        {
+                            id: 'starter',
+                            label: 'Starter',
+                            component: StarterDoc
                         }
                     ]
                 },