From 58c5cfebf254fc064045294ba4f2ee3b0898c035 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Tue, 1 Aug 2023 16:53:05 +0300
Subject: [PATCH] Add more TW docs

---
 assets/data/news.json             | 6 +++---
 doc/passthrough/BasicDoc.vue      | 5 ++++-
 doc/tailwind/CustomizationDoc.vue | 5 ++++-
 3 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/assets/data/news.json b/assets/data/news.json
index afd7ab4b6..58c2da55e 100644
--- a/assets/data/news.json
+++ b/assets/data/news.json
@@ -1,8 +1,8 @@
 {
-    "id": 40,
-    "content": "Introducing the new Unstyled Mode",
+    "id": 50,
+    "content": "90+ UI Components for Tailwind CSS",
     "linkText": "Learn More",
-    "linkHref": "https://primevue.org/unstyled",
+    "linkHref": "https://primevue.org/tailwind",
     "backgroundStyle": "background-color:#4f8ff7",
     "textStyle": "color:#ffffff;font-weight:500",
     "linkStyle": "color:#ffffff;font-weight:700;text-decoration: underline;"
diff --git a/doc/passthrough/BasicDoc.vue b/doc/passthrough/BasicDoc.vue
index a7d8d4d1c..d927ef3f2 100644
--- a/doc/passthrough/BasicDoc.vue
+++ b/doc/passthrough/BasicDoc.vue
@@ -5,7 +5,10 @@
             arbitrary properties to apply to the element such as styling, aria, data-* or custom attributes. If the value is a string or a function that returns a string, it is considered as a class definition and added to the class attribute of the
             element. Every component documentation has a dedicated section to document the available section names exposed via PT.
         </p>
-        <p>Most common usage of <i>pt</i> is styling and customization, example below styles a Panel component with PrimeFlex CSS library.</p>
+        <p>
+            Most common usage of <i>pt</i> is styling and customization. The <i>class</i> and <i>style</i> properties support the exact syntax of the corresponding
+            <a href="https://vuejs.org/guide/essentials/class-and-style.html">Vue bindings</a> like arrays, objects and conditionals. example below styles a Panel component with PrimeFlex CSS library.
+        </p>
     </DocSectionText>
 
     <div class="card">
diff --git a/doc/tailwind/CustomizationDoc.vue b/doc/tailwind/CustomizationDoc.vue
index 76cd31e60..d86ea27ba 100644
--- a/doc/tailwind/CustomizationDoc.vue
+++ b/doc/tailwind/CustomizationDoc.vue
@@ -1,6 +1,9 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>The built-in theme provides a strong base that can be extended further for your requirements. For customization, the pass through values need to be overriden. For instance, the panel component has the following default configuration.</p>
+        <p>
+            The built-in theme provides a strong base that can be extended further for your requirements. For customization, the pass through values need to be overriden. The unstyled section of the theming documentation for each component
+            demonstrates the theme with an editable example. For instance, the panel component has the following default configuration.
+        </p>
     </DocSectionText>
     <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
     <p>