From 805fb70ea7f2d11ad9219c8502adc202069b1e2d Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Mon, 24 Feb 2025 09:58:16 +0300
Subject: [PATCH] Add tailwind4 doc

---
 apps/showcase/doc/tailwind/OverviewDoc.vue |  3 +--
 apps/showcase/doc/tailwind/PluginDoc.vue   | 23 ++++++++++++++++++----
 2 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/apps/showcase/doc/tailwind/OverviewDoc.vue b/apps/showcase/doc/tailwind/OverviewDoc.vue
index e044867d3..a1633f3a2 100644
--- a/apps/showcase/doc/tailwind/OverviewDoc.vue
+++ b/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
-            take this approach to build components specifically for Tailwind.
+            Bootstrap, Tailwind offers primitive classes like <i>bg-blue-500</i>, <i>rounded</i> and <i>p-4</i> to apply a button.
         </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
diff --git a/apps/showcase/doc/tailwind/PluginDoc.vue b/apps/showcase/doc/tailwind/PluginDoc.vue
index 51e1cfc1b..110919872 100644
--- a/apps/showcase/doc/tailwind/PluginDoc.vue
+++ b/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]
 };
 `
             }