Add tailwind4 doc

apps/showcase/doc/tailwind/OverviewDoc.vue

@@ -2,8 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>
             Tailwind CSS is a popular CSS framework based on a utility-first design. The core provides flexible CSS classes with predefined CSS rules to build your own UI elements. For example, instead of an opinionated <i>btn</i> class as in
-            Bootstrap, Tailwind offers primitive classes like <i>bg-blue-500</i>, <i>rounded</i> and <i>p-4</i> to apply a button. A set of reusable classes can also be grouped as a Tailwind CSS component and there are even a couple of libraries that
+            Bootstrap, Tailwind offers primitive classes like <i>bg-blue-500</i>, <i>rounded</i> and <i>p-4</i> to apply a button.
-            take this approach to build components specifically for Tailwind.
         </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

apps/showcase/doc/tailwind/PluginDoc.vue

@@ -5,10 +5,17 @@
             PrimeVue and Tailwind CSS. It is designed to work both in styled and unstyled modes. In styled mode, for instance the semantic colors such as primary and surfaces are provided as Tailwind utilities e.g. <i>bg-primary</i>,
             <i>text-surface-500</i>, <i>text-muted-color</i>.
         </p>
-        <p>Plugin is available on npm.</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
+            properly, install the primeui plugin.
+        </p>
         <DocSectionCode :code="code1" hideToggleCode importCode hideStackBlitz />
-        <p>After installation, configure the plugin at your tailwind configuration file.</p>
+        <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>
+        <DocSectionCode :code="code3" hideToggleCode importCode hideStackBlitz />
     </DocSectionText>
 </template>
 
@@ -25,10 +32,18 @@ npm i tailwindcss-primeui
             },
             code2: {
                 basic: `
+@import "tailwindcss";
+@import "tailwindcss-primeui";
+`
+            },
+            code3: {
+                basic: `
 // tailwind.config.js
-module.exports = {
+import PrimeUI from 'tailwindcss-primeui';
+
+export default {
     // ...
-    plugins: [require('tailwindcss-primeui')]
+    plugins: [PrimeUI]
 };
 `
             }