From f15fb3de246d033fc4b3e28f2f68c36d52f69df5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Mon, 7 Aug 2023 14:27:39 +0300
Subject: [PATCH] Tailwind docs updated

---
 doc/autocomplete/theming/TailwindDoc.vue      | 124 ++++
 doc/autocomplete/theming/UnstyledDoc.vue      |  41 --
 doc/autocomplete/theming/index.vue            |  11 +-
 doc/breadcrumb/theming/TailwindDoc.vue        |  67 +++
 doc/breadcrumb/theming/UnstyledDoc.vue        |  39 --
 doc/breadcrumb/theming/index.vue              |  11 +-
 doc/calendar/theming/TailwindDoc.vue          | 178 ++++++
 doc/calendar/theming/UnstyledDoc.vue          |  29 -
 doc/calendar/theming/index.vue                |  11 +-
 doc/cascadeselect/theming/TailwindDoc.vue     | 164 ++++++
 doc/cascadeselect/theming/UnstyledDoc.vue     | 104 ----
 doc/cascadeselect/theming/index.vue           |  11 +-
 doc/checkbox/theming/TailwindDoc.vue          |  60 ++
 doc/checkbox/theming/UnstyledDoc.vue          |  29 -
 doc/checkbox/theming/index.vue                |  11 +-
 doc/chips/theming/TailwindDoc.vue             |  69 +++
 doc/chips/theming/UnstyledDoc.vue             |  29 -
 doc/chips/theming/index.vue                   |  11 +-
 doc/colorpicker/theming/TailwindDoc.vue       |  99 ++++
 doc/colorpicker/theming/UnstyledDoc.vue       |  29 -
 doc/colorpicker/theming/index.vue             |  11 +-
 doc/contextmenu/theming/TailwindDoc.vue       |  78 +++
 doc/contextmenu/theming/UnstyledDoc.vue       |  39 --
 doc/contextmenu/theming/index.vue             |  11 +-
 doc/datatable/theming/TailwindDoc.vue         | 538 ++++++++++++++++++
 doc/datatable/theming/UnstyledDoc.vue         | 217 -------
 doc/datatable/theming/index.vue               |  11 +-
 .../{UnstyledDoc.vue => TailwindDoc.vue}      |  63 +-
 doc/dataview/theming/index.vue                |  11 +-
 doc/dock/theming/TailwindDoc.vue              | 147 +++++
 doc/dock/theming/UnstyledDoc.vue              |  91 ---
 doc/dock/theming/index.vue                    |  11 +-
 doc/dropdown/theming/TailwindDoc.vue          | 126 ++++
 doc/dropdown/theming/UnstyledDoc.vue          |  36 --
 doc/dropdown/theming/index.vue                |  11 +-
 doc/editor/theming/TailwindDoc.vue            |  51 ++
 doc/editor/theming/UnstyledDoc.vue            |  29 -
 doc/editor/theming/index.vue                  |  11 +-
 doc/inputmask/theming/TailwindDoc.vue         |  44 ++
 doc/inputmask/theming/UnstyledDoc.vue         |  31 -
 doc/inputmask/theming/index.vue               |  11 +-
 doc/inputnumber/theming/TailwindDoc.vue       |  84 +++
 doc/inputnumber/theming/UnstyledDoc.vue       |  47 --
 doc/inputnumber/theming/index.vue             |  11 +-
 doc/inputswitch/theming/TailwindDoc.vue       |  63 ++
 doc/inputswitch/theming/UnstyledDoc.vue       |  29 -
 doc/inputswitch/theming/index.vue             |  11 +-
 doc/inputtext/theming/TailwindDoc.vue         |  58 ++
 doc/inputtext/theming/UnstyledDoc.vue         |  30 -
 doc/inputtext/theming/index.vue               |  11 +-
 doc/knob/theming/TailwindDoc.vue              |  53 ++
 doc/knob/theming/UnstyledDoc.vue              |  29 -
 doc/knob/theming/index.vue                    |  11 +-
 doc/listbox/theming/TailwindDoc.vue           |  85 +++
 doc/listbox/theming/UnstyledDoc.vue           |  36 --
 doc/listbox/theming/index.vue                 |  11 +-
 .../{UnstyledDoc.vue => TailwindDoc.vue}      |  81 ++-
 doc/megamenu/theming/index.vue                |  11 +-
 doc/menu/theming/TailwindDoc.vue              |  83 +++
 doc/menu/theming/UnstyledDoc.vue              |  32 --
 doc/menu/theming/index.vue                    |  11 +-
 doc/menubar/theming/TailwindDoc.vue           | 239 ++++++++
 doc/menubar/theming/UnstyledDoc.vue           | 151 -----
 doc/menubar/theming/index.vue                 |  11 +-
 doc/message/theming/TailwindDoc.vue           |  68 +++
 doc/message/theming/UnstyledDoc.vue           |  29 -
 doc/message/theming/index.vue                 |  11 +-
 doc/multiselect/theming/TailwindDoc.vue       | 174 ++++++
 doc/multiselect/theming/UnstyledDoc.vue       |  37 --
 doc/multiselect/theming/index.vue             |  11 +-
 doc/orderlist/theming/TailwindDoc.vue         | 171 ++++++
 doc/orderlist/theming/UnstyledDoc.vue         |  49 --
 doc/orderlist/theming/index.vue               |  11 +-
 doc/organizationchart/theming/TailwindDoc.vue | 140 +++++
 doc/organizationchart/theming/UnstyledDoc.vue |  86 ---
 doc/organizationchart/theming/index.vue       |  11 +-
 doc/paginator/theming/TailwindDoc.vue         | 214 +++++++
 doc/paginator/theming/UnstyledDoc.vue         |  26 -
 doc/paginator/theming/index.vue               |  11 +-
 .../{UnstyledDoc.vue => TailwindDoc.vue}      |  74 ++-
 doc/panelmenu/theming/index.vue               |  11 +-
 doc/password/theming/TailwindDoc.vue          |  87 +++
 doc/password/theming/UnstyledDoc.vue          |  29 -
 doc/password/theming/index.vue                |  11 +-
 doc/picklist/theming/TailwindDoc.vue          | 305 ++++++++++
 doc/picklist/theming/UnstyledDoc.vue          |  66 ---
 doc/picklist/theming/index.vue                |  11 +-
 doc/radiobutton/theming/TailwindDoc.vue       |  86 +++
 doc/radiobutton/theming/UnstyledDoc.vue       |  46 --
 doc/radiobutton/theming/index.vue             |  11 +-
 doc/rating/theming/TailwindDoc.vue            |  80 +++
 doc/rating/theming/UnstyledDoc.vue            |  29 -
 doc/rating/theming/index.vue                  |  11 +-
 doc/selectbutton/theming/TailwindDoc.vue      |  61 ++
 doc/selectbutton/theming/UnstyledDoc.vue      |  30 -
 doc/selectbutton/theming/index.vue            |  11 +-
 doc/slider/theming/TailwindDoc.vue            |  96 ++++
 doc/slider/theming/UnstyledDoc.vue            |  29 -
 doc/slider/theming/index.vue                  |  11 +-
 doc/steps/theming/TailwindDoc.vue             |  79 +++
 doc/steps/theming/UnstyledDoc.vue             |  48 --
 doc/steps/theming/index.vue                   |  11 +-
 .../{UnstyledDoc.vue => TailwindDoc.vue}      |  37 +-
 doc/tabmenu/theming/index.vue                 |  11 +-
 doc/textarea/theming/TailwindDoc.vue          |  50 ++
 doc/textarea/theming/UnstyledDoc.vue          |  29 -
 doc/textarea/theming/index.vue                |  11 +-
 .../{UnstyledDoc.vue => TailwindDoc.vue}      |  64 ++-
 doc/tieredmenu/theming/index.vue              |  11 +-
 doc/timeline/theming/TailwindDoc.vue          | 138 +++++
 doc/timeline/theming/UnstyledDoc.vue          |  57 --
 doc/timeline/theming/index.vue                |  11 +-
 doc/togglebutton/theming/TailwindDoc.vue      |  68 +++
 doc/togglebutton/theming/UnstyledDoc.vue      |  29 -
 doc/togglebutton/theming/index.vue            |  11 +-
 doc/tree/theming/TailwindDoc.vue              | 108 ++++
 doc/tree/theming/UnstyledDoc.vue              |  61 --
 doc/tree/theming/index.vue                    |  11 +-
 doc/treeselect/theming/TailwindDoc.vue        |  89 +++
 doc/treeselect/theming/UnstyledDoc.vue        |  62 --
 doc/treeselect/theming/index.vue              |  11 +-
 doc/treetable/theming/TailwindDoc.vue         | 201 +++++++
 doc/treetable/theming/UnstyledDoc.vue         |  66 ---
 doc/treetable/theming/index.vue               |  11 +-
 doc/tristatecheckbox/theming/TailwindDoc.vue  |  60 ++
 doc/tristatecheckbox/theming/UnstyledDoc.vue  |  30 -
 doc/tristatecheckbox/theming/index.vue        |  11 +-
 127 files changed, 5368 insertions(+), 2055 deletions(-)
 create mode 100644 doc/autocomplete/theming/TailwindDoc.vue
 delete mode 100644 doc/autocomplete/theming/UnstyledDoc.vue
 create mode 100644 doc/breadcrumb/theming/TailwindDoc.vue
 delete mode 100644 doc/breadcrumb/theming/UnstyledDoc.vue
 create mode 100644 doc/calendar/theming/TailwindDoc.vue
 delete mode 100644 doc/calendar/theming/UnstyledDoc.vue
 create mode 100644 doc/cascadeselect/theming/TailwindDoc.vue
 delete mode 100644 doc/cascadeselect/theming/UnstyledDoc.vue
 create mode 100644 doc/checkbox/theming/TailwindDoc.vue
 delete mode 100644 doc/checkbox/theming/UnstyledDoc.vue
 create mode 100644 doc/chips/theming/TailwindDoc.vue
 delete mode 100644 doc/chips/theming/UnstyledDoc.vue
 create mode 100644 doc/colorpicker/theming/TailwindDoc.vue
 delete mode 100644 doc/colorpicker/theming/UnstyledDoc.vue
 create mode 100644 doc/contextmenu/theming/TailwindDoc.vue
 delete mode 100644 doc/contextmenu/theming/UnstyledDoc.vue
 create mode 100644 doc/datatable/theming/TailwindDoc.vue
 delete mode 100644 doc/datatable/theming/UnstyledDoc.vue
 rename doc/dataview/theming/{UnstyledDoc.vue => TailwindDoc.vue} (67%)
 create mode 100644 doc/dock/theming/TailwindDoc.vue
 delete mode 100644 doc/dock/theming/UnstyledDoc.vue
 create mode 100644 doc/dropdown/theming/TailwindDoc.vue
 delete mode 100644 doc/dropdown/theming/UnstyledDoc.vue
 create mode 100644 doc/editor/theming/TailwindDoc.vue
 delete mode 100644 doc/editor/theming/UnstyledDoc.vue
 create mode 100644 doc/inputmask/theming/TailwindDoc.vue
 delete mode 100644 doc/inputmask/theming/UnstyledDoc.vue
 create mode 100644 doc/inputnumber/theming/TailwindDoc.vue
 delete mode 100644 doc/inputnumber/theming/UnstyledDoc.vue
 create mode 100644 doc/inputswitch/theming/TailwindDoc.vue
 delete mode 100644 doc/inputswitch/theming/UnstyledDoc.vue
 create mode 100644 doc/inputtext/theming/TailwindDoc.vue
 delete mode 100644 doc/inputtext/theming/UnstyledDoc.vue
 create mode 100644 doc/knob/theming/TailwindDoc.vue
 delete mode 100644 doc/knob/theming/UnstyledDoc.vue
 create mode 100644 doc/listbox/theming/TailwindDoc.vue
 delete mode 100644 doc/listbox/theming/UnstyledDoc.vue
 rename doc/megamenu/theming/{UnstyledDoc.vue => TailwindDoc.vue} (52%)
 create mode 100644 doc/menu/theming/TailwindDoc.vue
 delete mode 100644 doc/menu/theming/UnstyledDoc.vue
 create mode 100644 doc/menubar/theming/TailwindDoc.vue
 delete mode 100644 doc/menubar/theming/UnstyledDoc.vue
 create mode 100644 doc/message/theming/TailwindDoc.vue
 delete mode 100644 doc/message/theming/UnstyledDoc.vue
 create mode 100644 doc/multiselect/theming/TailwindDoc.vue
 delete mode 100644 doc/multiselect/theming/UnstyledDoc.vue
 create mode 100644 doc/orderlist/theming/TailwindDoc.vue
 delete mode 100644 doc/orderlist/theming/UnstyledDoc.vue
 create mode 100644 doc/organizationchart/theming/TailwindDoc.vue
 delete mode 100644 doc/organizationchart/theming/UnstyledDoc.vue
 create mode 100644 doc/paginator/theming/TailwindDoc.vue
 delete mode 100644 doc/paginator/theming/UnstyledDoc.vue
 rename doc/panelmenu/theming/{UnstyledDoc.vue => TailwindDoc.vue} (51%)
 create mode 100644 doc/password/theming/TailwindDoc.vue
 delete mode 100644 doc/password/theming/UnstyledDoc.vue
 create mode 100644 doc/picklist/theming/TailwindDoc.vue
 delete mode 100644 doc/picklist/theming/UnstyledDoc.vue
 create mode 100644 doc/radiobutton/theming/TailwindDoc.vue
 delete mode 100644 doc/radiobutton/theming/UnstyledDoc.vue
 create mode 100644 doc/rating/theming/TailwindDoc.vue
 delete mode 100644 doc/rating/theming/UnstyledDoc.vue
 create mode 100644 doc/selectbutton/theming/TailwindDoc.vue
 delete mode 100644 doc/selectbutton/theming/UnstyledDoc.vue
 create mode 100644 doc/slider/theming/TailwindDoc.vue
 delete mode 100644 doc/slider/theming/UnstyledDoc.vue
 create mode 100644 doc/steps/theming/TailwindDoc.vue
 delete mode 100644 doc/steps/theming/UnstyledDoc.vue
 rename doc/tabmenu/theming/{UnstyledDoc.vue => TailwindDoc.vue} (54%)
 create mode 100644 doc/textarea/theming/TailwindDoc.vue
 delete mode 100644 doc/textarea/theming/UnstyledDoc.vue
 rename doc/tieredmenu/theming/{UnstyledDoc.vue => TailwindDoc.vue} (56%)
 create mode 100644 doc/timeline/theming/TailwindDoc.vue
 delete mode 100644 doc/timeline/theming/UnstyledDoc.vue
 create mode 100644 doc/togglebutton/theming/TailwindDoc.vue
 delete mode 100644 doc/togglebutton/theming/UnstyledDoc.vue
 create mode 100644 doc/tree/theming/TailwindDoc.vue
 delete mode 100644 doc/tree/theming/UnstyledDoc.vue
 create mode 100644 doc/treeselect/theming/TailwindDoc.vue
 delete mode 100644 doc/treeselect/theming/UnstyledDoc.vue
 create mode 100644 doc/treetable/theming/TailwindDoc.vue
 delete mode 100644 doc/treetable/theming/UnstyledDoc.vue
 create mode 100644 doc/tristatecheckbox/theming/TailwindDoc.vue
 delete mode 100644 doc/tristatecheckbox/theming/UnstyledDoc.vue

diff --git a/doc/autocomplete/theming/TailwindDoc.vue b/doc/autocomplete/theming/TailwindDoc.vue
new file mode 100644
index 000000000..aa4271609
--- /dev/null
+++ b/doc/autocomplete/theming/TailwindDoc.vue
@@ -0,0 +1,124 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
+            <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
+        </p>
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <DocSectionCode :code="code2" embedded />
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code1: {
+                basic: `
+export const TRANSITIONS = {
+    toggleable: {
+        enterFromClass: 'max-h-0',
+        enterActiveClass: 'overflow-hidden transition-all duration-500 ease-in-out',
+        enterToClass: 'max-h-40	',
+        leaveFromClass: 'max-h-40',
+        leaveActiveClass: 'overflow-hidden transition-all duration-500 ease-in',
+        leaveToClass: 'max-h-0'
+    },
+    overlay: {
+        enterFromClass: 'opacity-0 scale-75',
+        enterActiveClass: 'transition-transform transition-opacity duration-150 ease-in',
+        leaveActiveClass: 'transition-opacity duration-150 ease-linear',
+        leaveToClass: 'opacity-0'
+    }
+};
+
+export default {
+    autocomplete: {
+        root: ({ props }) => ({
+            class: [
+                'relative inline-flex',
+                {
+                    'opacity-60 select-none pointer-events-none cursor-default': props.disabled
+                },
+                { 'w-full': props.multiple }
+            ]
+        }),
+        container: {
+            class: [
+                'm-0 list-none cursor-text overflow-hidden flex items-center flex-wrap w-full',
+                'px-3 py-2 gap-2',
+                'font-sans text-base text-gray-700 dark:text-white/80 bg-white dark:bg-gray-900 border border-gray-300 dark:border-blue-900/40  transition duration-200 ease-in-out appearance-none rounded-md',
+                'focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] hover:border-blue-500 focus:outline-none dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]'
+            ]
+        },
+        inputtoken: {
+            class: ['py-0.375rem px-0', 'flex-1 inline-flex']
+        },
+        input: ({ props }) => ({
+            class: [
+                'm-0',
+                ' transition-colors duration-200 appearance-none rounded-lg',
+                { 'rounded-tr-none rounded-br-none': props.dropdown },
+                {
+                    'font-sans text-base text-gray-700 dark:text-white/80 bg-white dark:bg-gray-900 p-3 border border-gray-300 dark:border-blue-900/40 focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)] hover:border-blue-500 focus:outline-none':
+                        !props.multiple,
+                    'font-sans text-base text-gray-700 dark:text-white/80 border-0 outline-none bg-transparent m-0 p-0 shadow-none rounded-none w-full': props.multiple
+                }
+            ]
+        }),
+        token: {
+            class: ['py-1 px-2 mr-2 bg-gray-300 dark:bg-gray-700 text-gray-700 dark:text-white/80 rounded-full', 'cursor-default inline-flex items-center']
+        },
+        dropdownbutton: {
+            root: 'rounded-tl-none rounded-bl-none'
+        },
+        panel: {
+            class: ['bg-white text-gray-700 border-0 rounded-md shadow-lg', 'max-h-[200px] overflow-auto', 'bg-white text-gray-700 border-0 rounded-md shadow-lg', 'dark:bg-gray-900 dark:text-white/80']
+        },
+        list: 'py-3 list-none m-0',
+        item: ({ context }) => ({
+            class: [
+                'cursor-pointer font-normal overflow-hidden relative whitespace-nowrap',
+                'm-0 p-3 border-0  transition-shadow duration-200 rounded-none',
+                'dark:text-white/80 dark:hover:bg-gray-800',
+                'hover:text-gray-700 hover:bg-gray-200',
+                {
+                    'text-gray-700': !context.focused && !context.selected,
+                    'bg-gray-300 text-gray-700 dark:text-white/80 dark:bg-gray-800/90': context.focused && !context.selected,
+                    'bg-blue-500 text-blue-700 dark:bg-blue-400 dark:text-white/80': context.focused && context.selected,
+                    'bg-blue-50 text-blue-700 dark:bg-blue-300 dark:text-white/80': !context.focused && context.selected
+                }
+            ]
+        }),
+        itemgroup: {
+            class: ['m-0 p-3 text-gray-800 bg-white font-bold', 'dark:bg-gray-900 dark:text-white/80', 'cursor-auto']
+        },
+        transition: TRANSITIONS.overlay
+    }
+}
+`
+            },
+            code2: {
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <AutoComplete v-model="value" :suggestions="items" @complete="search" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const value = ref("");
+const items = ref([]);
+
+const search = (event) => {
+    items.value = [...Array(10).keys()].map((item) => event.query + '-' + item);
+}
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/autocomplete/theming/UnstyledDoc.vue b/doc/autocomplete/theming/UnstyledDoc.vue
deleted file mode 100644
index 76153e026..000000000
--- a/doc/autocomplete/theming/UnstyledDoc.vue
+++ /dev/null
@@ -1,41 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
-    </DocSectionText>
-    <DocSectionCode :code="code" embedded />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: '',
-            items: [],
-            code: {
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <AutoComplete v-model="value" :suggestions="items" @complete="search" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const value = ref("");
-const items = ref([]);
-
-const search = (event) => {
-    items.value = [...Array(10).keys()].map((item) => event.query + '-' + item);
-}
-<\/script>`
-            }
-        };
-    },
-    methods: {
-        search(event) {
-            this.items = [...Array(10).keys()].map((item) => event.query + '-' + item);
-        }
-    }
-};
-</script>
diff --git a/doc/autocomplete/theming/index.vue b/doc/autocomplete/theming/index.vue
index 65913fac5..5438ceccd 100644
--- a/doc/autocomplete/theming/index.vue
+++ b/doc/autocomplete/theming/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import StyledDoc from './StyledDoc.vue';
-import UnstyledDoc from './UnstyledDoc.vue';
+import TailwindDoc from './TailwindDoc.vue';
 
 export default {
     data() {
@@ -24,7 +24,14 @@ export default {
                 {
                     id: 'unstyled',
                     label: 'Unstyled',
-                    component: UnstyledDoc
+                    description: 'Theming is implemented with the pass through properties in unstyled mode.',
+                    children: [
+                        {
+                            id: 'tailwind',
+                            label: 'Tailwind',
+                            component: TailwindDoc
+                        }
+                    ]
                 }
             ]
         };
diff --git a/doc/breadcrumb/theming/TailwindDoc.vue b/doc/breadcrumb/theming/TailwindDoc.vue
new file mode 100644
index 000000000..316f0547d
--- /dev/null
+++ b/doc/breadcrumb/theming/TailwindDoc.vue
@@ -0,0 +1,67 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
+            <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
+        </p>
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <DocSectionCode :code="code2" embedded />
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code1: {
+                basic: `
+export default {
+    breadcrumb: {
+        root: {
+            class: ['overflow-x-auto', 'bg-white dark:bg-gray-900 border border-gray-300 dark:border-blue-900/40 rounded-md p-4']
+        },
+        menu: 'm-0 p-0 list-none flex items-center flex-nowrap',
+        action: {
+            class: [
+                'text-decoration-none flex items-center',
+                'transition-shadow duration-200 rounded-md text-gray-600 dark:text-white/70',
+                'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]'
+            ]
+        },
+        icon: 'text-gray-600 dark:text-white/70',
+        separator: {
+            class: ['mx-2 text-gray-600 dark:text-white/70', 'flex items-center']
+        }
+    }
+}
+`
+            },
+            code2: {
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Breadcrumb :home="home" :model="items" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const home = ref({
+    icon: 'pi pi-home',
+    to: '/',
+});
+const items = ref([
+    {label: 'Computer'},
+    {label: 'Notebook'},
+    {label: 'Accessories'},
+    {label: 'Backpacks'},
+    {label: 'Item'}
+]);
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/breadcrumb/theming/UnstyledDoc.vue b/doc/breadcrumb/theming/UnstyledDoc.vue
deleted file mode 100644
index 7e4121693..000000000
--- a/doc/breadcrumb/theming/UnstyledDoc.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
-    </DocSectionText>
-    <DocSectionCode :code="code" embedded />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Breadcrumb :home="home" :model="items" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const home = ref({
-    icon: 'pi pi-home',
-    to: '/',
-});
-const items = ref([
-    {label: 'Computer'},
-    {label: 'Notebook'},
-    {label: 'Accessories'},
-    {label: 'Backpacks'},
-    {label: 'Item'}
-]);
-<\/script>`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/breadcrumb/theming/index.vue b/doc/breadcrumb/theming/index.vue
index 8bbb93133..f3fbca8d4 100644
--- a/doc/breadcrumb/theming/index.vue
+++ b/doc/breadcrumb/theming/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import StyledDoc from './StyledDoc.vue';
-import UnstyledDoc from './UnstyledDoc.vue';
+import TailwindDoc from './TailwindDoc.vue';
 
 export default {
     data() {
@@ -24,7 +24,14 @@ export default {
                 {
                     id: 'unstyled',
                     label: 'Unstyled',
-                    component: UnstyledDoc
+                    description: 'Theming is implemented with the pass through properties in unstyled mode.',
+                    children: [
+                        {
+                            id: 'tailwind',
+                            label: 'Tailwind',
+                            component: TailwindDoc
+                        }
+                    ]
                 }
             ]
         };
diff --git a/doc/calendar/theming/TailwindDoc.vue b/doc/calendar/theming/TailwindDoc.vue
new file mode 100644
index 000000000..457ea8f47
--- /dev/null
+++ b/doc/calendar/theming/TailwindDoc.vue
@@ -0,0 +1,178 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
+            <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
+        </p>
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <DocSectionCode :code="code2" embedded />
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code1: {
+                basic: `
+export const TRANSITIONS = {
+    toggleable: {
+        enterFromClass: 'max-h-0',
+        enterActiveClass: 'overflow-hidden transition-all duration-500 ease-in-out',
+        enterToClass: 'max-h-40	',
+        leaveFromClass: 'max-h-40',
+        leaveActiveClass: 'overflow-hidden transition-all duration-500 ease-in',
+        leaveToClass: 'max-h-0'
+    },
+    overlay: {
+        enterFromClass: 'opacity-0 scale-75',
+        enterActiveClass: 'transition-transform transition-opacity duration-150 ease-in',
+        leaveActiveClass: 'transition-opacity duration-150 ease-linear',
+        leaveToClass: 'opacity-0'
+    }
+};
+
+export default {
+    calendar: {
+        root: ({ props }) => ({
+            class: [
+                'inline-flex max-w-full relative',
+                {
+                    'opacity-60 select-none pointer-events-none cursor-default': props.disabled
+                }
+            ]
+        }),
+        input: {
+            class: [
+                'font-sans text-base text-gray-600 dark:text-white/80 bg-white dark:bg-gray-900 p-3 border border-gray-300 dark:border-blue-900/40 transition-colors duration-200 appearance-none rounded-lg',
+                'hover:border-blue-500' //Hover
+            ]
+        },
+        panel: ({ props }) => ({
+            class: [
+                'bg-white dark:bg-gray-900',
+                'min-w-[350px]',
+                {
+                    'shadow-md border-0 absolute': !props.inline,
+                    'inline-block overflow-x-auto border border-gray-300 dark:border-blue-900/40 p-2 rounded-lg': props.inline
+                }
+            ]
+        }),
+        header: {
+            class: ['flex items-center justify-between', 'p-2 text-gray-700 dark:text-white/80 bg-white dark:bg-gray-900 font-semibold m-0 border-b border-gray-300 dark:border-blue-900/40 rounded-t-lg']
+        },
+        previousbutton: {
+            class: [
+                'flex items-center justify-center cursor-pointer overflow-hidden relative',
+                'w-8 h-8 text-gray-600 dark:text-white/70 border-0 bg-transparent rounded-full transition-colors duration-200 ease-in-out',
+                'hover:text-gray-700 dark:hover:text-white/80 hover:border-transparent hover:bg-gray-200 dark:hover:bg-gray-800/80 '
+            ]
+        },
+        title: 'leading-8 mx-auto',
+        monthTitle: {
+            class: ['text-gray-700 dark:text-white/80 transition duration-200 font-semibold p-2', 'mr-2', 'hover:text-blue-500']
+        },
+        yearTitle: {
+            class: ['text-gray-700 dark:text-white/80 transition duration-200 font-semibold p-2', 'hover:text-blue-500']
+        },
+        nextbutton: {
+            class: [
+                'flex items-center justify-center cursor-pointer overflow-hidden relative',
+                'w-8 h-8 text-gray-600 dark:text-white/70 border-0 bg-transparent rounded-full transition-colors duration-200 ease-in-out',
+                'hover:text-gray-700 dark:hover:text-white/80 hover:border-transparent hover:bg-gray-200 dark:hover:bg-gray-800/80 '
+            ]
+        },
+        table: {
+            class: ['border-collapse w-full', 'my-2']
+        },
+        tableheadercell: 'p-2',
+        weekday: 'text-gray-600 dark:text-white/70',
+        day: 'p-2',
+        daylabel: ({ context }) => ({
+            class: [
+                'w-10 h-10 rounded-full transition-shadow duration-200 border-transparent border',
+                'flex items-center justify-center mx-auto overflow-hidden relative',
+                'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]',
+                {
+                    'opacity-60 cursor-default': context.disabled,
+                    'cursor-pointer': !context.disabled
+                },
+                {
+                    'text-gray-600 dark:text-white/70 bg-transprent hover:bg-gray-200 dark:hover:bg-gray-800/80': !context.selected && !context.disabled,
+                    'text-blue-700 bg-blue-100 hover:bg-blue-200': context.selected && !context.disabled
+                }
+            ]
+        }),
+        monthpicker: 'my-2',
+        month: ({ context }) => ({
+            class: [
+                'w-1/3 inline-flex items-center justify-center cursor-pointer overflow-hidden relative',
+                'p-2 transition-shadow duration-200 rounded-lg',
+                'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]',
+                { 'text-gray-600 dark:text-white/70 bg-transprent hover:bg-gray-200 dark:hover:bg-gray-800/80': !context.selected && !context.disabled, 'text-blue-700 bg-blue-100 hover:bg-blue-200': context.selected && !context.disabled }
+            ]
+        }),
+        yearpicker: {
+            class: ['my-2']
+        },
+        year: ({ context }) => ({
+            class: [
+                'w-1/2 inline-flex items-center justify-center cursor-pointer overflow-hidden relative',
+                'p-2 transition-shadow duration-200 rounded-lg',
+                'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]',
+                {
+                    'text-gray-600 dark:text-white/70 bg-transprent hover:bg-gray-200 dark:hover:bg-gray-800/80': !context.selected && !context.disabled,
+                    'text-blue-700 bg-blue-100 hover:bg-blue-200': context.selected && !context.disabled
+                }
+            ]
+        }),
+        timepicker: {
+            class: ['flex justify-center items-center', 'border-t-1 border-solid border-gray-300 p-2']
+        },
+        separatorcontainer: 'flex items-center flex-col px-2',
+        separator: 'text-xl',
+        hourpicker: 'flex items-center flex-col px-2',
+        minutepicker: 'flex items-center flex-col px-2',
+        ampmpicker: 'flex items-center flex-col px-2',
+        incrementbutton: {
+            class: [
+                'flex items-center justify-center cursor-pointer overflow-hidden relative',
+                'w-8 h-8 text-gray-600 dark:text-white/70 border-0 bg-transparent rounded-full transition-colors duration-200 ease-in-out',
+                'hover:text-gray-700 dark:hover:text-white/80 hover:border-transparent hover:bg-gray-200 dark:hover:bg-gray-800/80 '
+            ]
+        },
+        decrementbutton: {
+            class: [
+                'flex items-center justify-center cursor-pointer overflow-hidden relative',
+                'w-8 h-8 text-gray-600 dark:text-white/70 border-0 bg-transparent rounded-full transition-colors duration-200 ease-in-out',
+                'hover:text-gray-700 dark:hover:text-white/80 hover:border-transparent hover:bg-gray-200 dark:hover:bg-gray-800/80 '
+            ]
+        },
+        groupcontainer: 'flex',
+        group: {
+            class: ['flex-1', 'border-l border-gray-300 pr-0.5 pl-0.5 pt-0 pb-0', 'first:pl-0 first:border-l-0']
+        },
+        transition: TRANSITIONS.overlay
+    }
+}
+`
+            },
+            code2: {
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Calendar v-model="date" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const date = ref();
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/calendar/theming/UnstyledDoc.vue b/doc/calendar/theming/UnstyledDoc.vue
deleted file mode 100644
index 05f30543a..000000000
--- a/doc/calendar/theming/UnstyledDoc.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
-    </DocSectionText>
-    <DocSectionCode :code="code" embedded />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Calendar v-model="date" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const date = ref();
-<\/script>`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/calendar/theming/index.vue b/doc/calendar/theming/index.vue
index fc293b5e4..020438cf4 100644
--- a/doc/calendar/theming/index.vue
+++ b/doc/calendar/theming/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import StyledDoc from './StyledDoc.vue';
-import UnstyledDoc from './UnstyledDoc.vue';
+import TailwindDoc from './TailwindDoc.vue';
 
 export default {
     data() {
@@ -24,7 +24,14 @@ export default {
                 {
                     id: 'unstyled',
                     label: 'Unstyled',
-                    component: UnstyledDoc
+                    description: 'Theming is implemented with the pass through properties in unstyled mode.',
+                    children: [
+                        {
+                            id: 'tailwind',
+                            label: 'Tailwind',
+                            component: TailwindDoc
+                        }
+                    ]
                 }
             ]
         };
diff --git a/doc/cascadeselect/theming/TailwindDoc.vue b/doc/cascadeselect/theming/TailwindDoc.vue
new file mode 100644
index 000000000..5a4eecae0
--- /dev/null
+++ b/doc/cascadeselect/theming/TailwindDoc.vue
@@ -0,0 +1,164 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
+            <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
+        </p>
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <DocSectionCode :code="code2" embedded />
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code1: {
+                basic: `
+export const TRANSITIONS = {
+    toggleable: {
+        enterFromClass: 'max-h-0',
+        enterActiveClass: 'overflow-hidden transition-all duration-500 ease-in-out',
+        enterToClass: 'max-h-40	',
+        leaveFromClass: 'max-h-40',
+        leaveActiveClass: 'overflow-hidden transition-all duration-500 ease-in',
+        leaveToClass: 'max-h-0'
+    },
+    overlay: {
+        enterFromClass: 'opacity-0 scale-75',
+        enterActiveClass: 'transition-transform transition-opacity duration-150 ease-in',
+        leaveActiveClass: 'transition-opacity duration-150 ease-linear',
+        leaveToClass: 'opacity-0'
+    }
+};
+
+export default {
+    cascadeselect: {
+        root: ({ props }) => ({
+            class: [
+                'inline-flex cursor-pointer select-none relative',
+                'bg-white dark:bg-gray-900 border border-gray-300 dark:border-blue-900/40 transition duration-200 ease-in-out rounded-lg',
+                { 'opacity-60 select-none pointer-events-none cursor-default': props.disabled }
+            ]
+        }),
+        label: {
+            class: ['block whitespace-nowrap overflow-hidden flex flex-1 w-1 text-overflow-ellipsis cursor-pointer', 'bg-transparent border-0 p-3 text-gray-700 dark:text-white/80', 'appearance-none rounded-md']
+        },
+        dropdownbutton: {
+            class: ['flex items-center justify-center shrink-0', 'bg-transparent text-gray-600 dark:text-white/80 w-[3rem] rounded-tr-6 rounded-br-6']
+        },
+        panel: 'absolute py-3 bg-white dark:bg-gray-900 border-0 shadow-md',
+        list: 'm-0 sm:p-0 list-none',
+        item: {
+            class: [
+                'cursor-pointer font-normal whitespace-nowrap',
+                'm-0 border-0 bg-transparent transition-shadow rounded-none',
+                'text-gray-700 dark:text-white/80 hover:text-gray-700 dark:hover:text-white/80 hover:bg-gray-200 dark:hover:bg-gray-800/80'
+            ]
+        },
+        content: {
+            class: ['flex items-center overflow-hidden relative', 'py-3 px-5']
+        },
+        groupicon: 'ml-auto',
+        sublist: {
+            class: ['block absolute left-full top-0', 'min-w-full z-10', 'py-3 bg-white dark:bg-gray-900 border-0 shadow-md']
+        },
+        transition: TRANSITIONS.overlay
+    }
+}
+`
+            },
+            code2: {
+                composition: `
+<template>
+    <div class="card flex justify-content-center">
+        <CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name"
+            :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const selectedCity = ref();
+const countries = ref([
+    {
+        name: 'Australia',
+        code: 'AU',
+        states: [
+            {
+                name: 'New South Wales',
+                cities: [
+                    { cname: 'Sydney', code: 'A-SY' },
+                    { cname: 'Newcastle', code: 'A-NE' },
+                    { cname: 'Wollongong', code: 'A-WO' }
+                ]
+            },
+            {
+                name: 'Queensland',
+                cities: [
+                    { cname: 'Brisbane', code: 'A-BR' },
+                    { cname: 'Townsville', code: 'A-TO' }
+                ]
+            }
+        ]
+    },
+    {
+        name: 'Canada',
+        code: 'CA',
+        states: [
+            {
+                name: 'Quebec',
+                cities: [
+                    { cname: 'Montreal', code: 'C-MO' },
+                    { cname: 'Quebec City', code: 'C-QU' }
+                ]
+            },
+            {
+                name: 'Ontario',
+                cities: [
+                    { cname: 'Ottawa', code: 'C-OT' },
+                    { cname: 'Toronto', code: 'C-TO' }
+                ]
+            }
+        ]
+    },
+    {
+        name: 'United States',
+        code: 'US',
+        states: [
+            {
+                name: 'California',
+                cities: [
+                    { cname: 'Los Angeles', code: 'US-LA' },
+                    { cname: 'San Diego', code: 'US-SD' },
+                    { cname: 'San Francisco', code: 'US-SF' }
+                ]
+            },
+            {
+                name: 'Florida',
+                cities: [
+                    { cname: 'Jacksonville', code: 'US-JA' },
+                    { cname: 'Miami', code: 'US-MI' },
+                    { cname: 'Tampa', code: 'US-TA' },
+                    { cname: 'Orlando', code: 'US-OR' }
+                ]
+            },
+            {
+                name: 'Texas',
+                cities: [
+                    { cname: 'Austin', code: 'US-AU' },
+                    { cname: 'Dallas', code: 'US-DA' },
+                    { cname: 'Houston', code: 'US-HO' }
+                ]
+            }
+        ]
+    }
+]);
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/cascadeselect/theming/UnstyledDoc.vue b/doc/cascadeselect/theming/UnstyledDoc.vue
deleted file mode 100644
index 92cf25b6d..000000000
--- a/doc/cascadeselect/theming/UnstyledDoc.vue
+++ /dev/null
@@ -1,104 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
-    </DocSectionText>
-    <DocSectionCode :code="code" embedded />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                composition: `
-<template>
-    <div class="card flex justify-content-center">
-        <CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name"
-            :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const selectedCity = ref();
-const countries = ref([
-    {
-        name: 'Australia',
-        code: 'AU',
-        states: [
-            {
-                name: 'New South Wales',
-                cities: [
-                    { cname: 'Sydney', code: 'A-SY' },
-                    { cname: 'Newcastle', code: 'A-NE' },
-                    { cname: 'Wollongong', code: 'A-WO' }
-                ]
-            },
-            {
-                name: 'Queensland',
-                cities: [
-                    { cname: 'Brisbane', code: 'A-BR' },
-                    { cname: 'Townsville', code: 'A-TO' }
-                ]
-            }
-        ]
-    },
-    {
-        name: 'Canada',
-        code: 'CA',
-        states: [
-            {
-                name: 'Quebec',
-                cities: [
-                    { cname: 'Montreal', code: 'C-MO' },
-                    { cname: 'Quebec City', code: 'C-QU' }
-                ]
-            },
-            {
-                name: 'Ontario',
-                cities: [
-                    { cname: 'Ottawa', code: 'C-OT' },
-                    { cname: 'Toronto', code: 'C-TO' }
-                ]
-            }
-        ]
-    },
-    {
-        name: 'United States',
-        code: 'US',
-        states: [
-            {
-                name: 'California',
-                cities: [
-                    { cname: 'Los Angeles', code: 'US-LA' },
-                    { cname: 'San Diego', code: 'US-SD' },
-                    { cname: 'San Francisco', code: 'US-SF' }
-                ]
-            },
-            {
-                name: 'Florida',
-                cities: [
-                    { cname: 'Jacksonville', code: 'US-JA' },
-                    { cname: 'Miami', code: 'US-MI' },
-                    { cname: 'Tampa', code: 'US-TA' },
-                    { cname: 'Orlando', code: 'US-OR' }
-                ]
-            },
-            {
-                name: 'Texas',
-                cities: [
-                    { cname: 'Austin', code: 'US-AU' },
-                    { cname: 'Dallas', code: 'US-DA' },
-                    { cname: 'Houston', code: 'US-HO' }
-                ]
-            }
-        ]
-    }
-]);
-<\/script>`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/cascadeselect/theming/index.vue b/doc/cascadeselect/theming/index.vue
index bef24603b..397e8fea0 100644
--- a/doc/cascadeselect/theming/index.vue
+++ b/doc/cascadeselect/theming/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import StyledDoc from './StyledDoc.vue';
-import UnstyledDoc from './UnstyledDoc.vue';
+import TailwindDoc from './TailwindDoc.vue';
 
 export default {
     data() {
@@ -24,7 +24,14 @@ export default {
                 {
                     id: 'unstyled',
                     label: 'Unstyled',
-                    component: UnstyledDoc
+                    description: 'Theming is implemented with the pass through properties in unstyled mode.',
+                    children: [
+                        {
+                            id: 'tailwind',
+                            label: 'Tailwind',
+                            component: TailwindDoc
+                        }
+                    ]
                 }
             ]
         };
diff --git a/doc/checkbox/theming/TailwindDoc.vue b/doc/checkbox/theming/TailwindDoc.vue
new file mode 100644
index 000000000..2bffa8e03
--- /dev/null
+++ b/doc/checkbox/theming/TailwindDoc.vue
@@ -0,0 +1,60 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
+            <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
+        </p>
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <DocSectionCode :code="code2" embedded />
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code1: {
+                basic: `
+export default {
+    checkbox: {
+        root: {
+            class: ['cursor-pointer inline-flex relative select-none align-bottom', 'w-6 h-6']
+        },
+        input: ({ props, context }) => ({
+            class: [
+                'flex items-center justify-center',
+                'border-2 w-6 h-6 text-gray-600 rounded-lg transition-colors duration-200',
+                {
+                    'border-gray-300 bg-white dark:border-blue-900/40 dark:bg-gray-900': !context.checked,
+                    'border-blue-500 bg-blue-500 dark:border-blue-400 dark:bg-blue-400': context.checked
+                },
+                {
+                    'hover:border-blue-500 dark:hover:border-blue-400 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]': !props.disabled,
+                    'cursor-default opacity-60': props.disabled
+                }
+            ]
+        }),
+        icon: 'w-4 h-4 transition-all duration-200 text-white text-base dark:text-gray-900'
+    }
+}
+`
+            },
+            code2: {
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Checkbox v-model="checked" :binary="true" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const checked = ref(false);
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/checkbox/theming/UnstyledDoc.vue b/doc/checkbox/theming/UnstyledDoc.vue
deleted file mode 100644
index 04e97004e..000000000
--- a/doc/checkbox/theming/UnstyledDoc.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
-    </DocSectionText>
-    <DocSectionCode :code="code" embedded />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Checkbox v-model="checked" :binary="true" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const checked = ref(false);
-<\/script>`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/checkbox/theming/index.vue b/doc/checkbox/theming/index.vue
index 562ab5a93..0a4cbf01d 100644
--- a/doc/checkbox/theming/index.vue
+++ b/doc/checkbox/theming/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import StyledDoc from './StyledDoc.vue';
-import UnstyledDoc from './UnstyledDoc.vue';
+import TailwindDoc from './TailwindDoc.vue';
 
 export default {
     data() {
@@ -24,7 +24,14 @@ export default {
                 {
                     id: 'unstyled',
                     label: 'Unstyled',
-                    component: UnstyledDoc
+                    description: 'Theming is implemented with the pass through properties in unstyled mode.',
+                    children: [
+                        {
+                            id: 'tailwind',
+                            label: 'Tailwind',
+                            component: TailwindDoc
+                        }
+                    ]
                 }
             ]
         };
diff --git a/doc/chips/theming/TailwindDoc.vue b/doc/chips/theming/TailwindDoc.vue
new file mode 100644
index 000000000..eca2de428
--- /dev/null
+++ b/doc/chips/theming/TailwindDoc.vue
@@ -0,0 +1,69 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
+            <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
+        </p>
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <DocSectionCode :code="code2" embedded />
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code1: {
+                basic: `
+export default {
+    chips: {
+        root: ({ props }) => ({
+            class: [
+                'flex',
+                {
+                    'opacity-60 select-none pointer-events-none cursor-default': props.disabled
+                }
+            ]
+        }),
+        container: {
+            class: [
+                'm-0 py-1.5 px-3 list-none cursor-text overflow-hidden flex items-center flex-wrap',
+                'w-full',
+                'font-sans text-base text-gray-600 dark:text-white/70 bg-white dark:bg-gray-900 p-3 border border-gray-300 dark:border-blue-900/40 transition-colors duration-200 appearance-none rounded-lg',
+                'hover:border-blue-500 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]'
+            ]
+        },
+
+        inputtoken: {
+            class: ['py-1.5 px-0', 'flex flex-1 inline-flex']
+        },
+        input: {
+            class: ['font-sans text-base text-gray-700 dark:text-white/80 p-0 m-0', 'border-0 outline-none bg-transparent shadow-none rounded-none w-full']
+        },
+        token: {
+            class: ['py-1 px-2 mr-2 bg-gray-300 dark:bg-gray-700 text-gray-700 dark:text-white/80 rounded-full', 'cursor-default inline-flex items-center']
+        },
+        removeTokenIcon: 'ml-2'
+    }
+}
+`
+            },
+            code2: {
+                composition: `
+<template>
+    <div class="card">
+        <Chips v-model="value" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const value = ref();
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/chips/theming/UnstyledDoc.vue b/doc/chips/theming/UnstyledDoc.vue
deleted file mode 100644
index 9655fe616..000000000
--- a/doc/chips/theming/UnstyledDoc.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
-    </DocSectionText>
-    <DocSectionCode :code="code" embedded />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                composition: `
-<template>
-    <div class="card">
-        <Chips v-model="value" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const value = ref();
-<\/script>`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/chips/theming/index.vue b/doc/chips/theming/index.vue
index c241271b6..fa92737ad 100644
--- a/doc/chips/theming/index.vue
+++ b/doc/chips/theming/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import StyledDoc from './StyledDoc.vue';
-import UnstyledDoc from './UnstyledDoc.vue';
+import TailwindDoc from './TailwindDoc.vue';
 
 export default {
     data() {
@@ -24,7 +24,14 @@ export default {
                 {
                     id: 'unstyled',
                     label: 'Unstyled',
-                    component: UnstyledDoc
+                    description: 'Theming is implemented with the pass through properties in unstyled mode.',
+                    children: [
+                        {
+                            id: 'tailwind',
+                            label: 'Tailwind',
+                            component: TailwindDoc
+                        }
+                    ]
                 }
             ]
         };
diff --git a/doc/colorpicker/theming/TailwindDoc.vue b/doc/colorpicker/theming/TailwindDoc.vue
new file mode 100644
index 000000000..a1f97642b
--- /dev/null
+++ b/doc/colorpicker/theming/TailwindDoc.vue
@@ -0,0 +1,99 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
+            <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
+        </p>
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <DocSectionCode :code="code2" embedded />
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code1: {
+                basic: `
+export const TRANSITIONS = {
+    toggleable: {
+        enterFromClass: 'max-h-0',
+        enterActiveClass: 'overflow-hidden transition-all duration-500 ease-in-out',
+        enterToClass: 'max-h-40	',
+        leaveFromClass: 'max-h-40',
+        leaveActiveClass: 'overflow-hidden transition-all duration-500 ease-in',
+        leaveToClass: 'max-h-0'
+    },
+    overlay: {
+        enterFromClass: 'opacity-0 scale-75',
+        enterActiveClass: 'transition-transform transition-opacity duration-150 ease-in',
+        leaveActiveClass: 'transition-opacity duration-150 ease-linear',
+        leaveToClass: 'opacity-0'
+    }
+};
+
+export default {
+    colorpicker: {
+        root: ({ props }) => ({
+            class: [
+                'inline-block',
+                {
+                    'opacity-60 select-none pointer-events-none cursor-default': props.disabled
+                }
+            ]
+        }),
+        input: {
+            class: [
+                'm-0',
+                'font-sans text-base text-gray-600 bg-white dark:bg-gray-900 p-3 border border-gray-300 dark:border-blue-900/40 transition-colors duration-200 rounded-lg cursor-pointer',
+                'hover:border-blue-500 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]',
+                'w-8 h-8'
+            ]
+        },
+        panel: ({ props }) => ({
+            class: [
+                'shadow-md',
+                'bg-gray-800 border-gray-900',
+                {
+                    'relative h-48 w-52': props.inline,
+                    'absolute h-48 w-52': !props.inline
+                }
+            ]
+        }),
+        selector: 'absolute h-44 w-40 top-2 left-2',
+        color: {
+            class: 'h-44 w-40',
+            style: 'background: linear-gradient(to top, #000 0%, rgb(0 0 0 / 0) 100%), linear-gradient(to right, #fff 0%, rgb(255 255 255 / 0) 100%)'
+        },
+        colorhandle: {
+            class: ['rounded-full border border-solid cursor-pointer h-3 w-3 absolute  opacity-85', 'border-white']
+        },
+        hue: {
+            class: ['h-44 w-6 absolute top-2 left-44 opacity-85'],
+            style: 'background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red)'
+        },
+        huehandle: 'border-solid border-2 cursor-pointer h-2 w-8 left-0 -ml-1 -mt-1 opacity-85 absolute',
+        transition: TRANSITIONS.overlay
+    }
+}
+`
+            },
+            code2: {
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <ColorPicker v-model="color" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const color = ref();
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/colorpicker/theming/UnstyledDoc.vue b/doc/colorpicker/theming/UnstyledDoc.vue
deleted file mode 100644
index d69afe456..000000000
--- a/doc/colorpicker/theming/UnstyledDoc.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
-    </DocSectionText>
-    <DocSectionCode :code="code" embedded />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <ColorPicker v-model="color" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const color = ref();
-<\/script>`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/colorpicker/theming/index.vue b/doc/colorpicker/theming/index.vue
index 54723caa5..bdb5676b5 100644
--- a/doc/colorpicker/theming/index.vue
+++ b/doc/colorpicker/theming/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import StyledDoc from './StyledDoc.vue';
-import UnstyledDoc from './UnstyledDoc.vue';
+import TailwindDoc from './TailwindDoc.vue';
 
 export default {
     data() {
@@ -24,7 +24,14 @@ export default {
                 {
                     id: 'unstyled',
                     label: 'Unstyled',
-                    component: UnstyledDoc
+                    description: 'Theming is implemented with the pass through properties in unstyled mode.',
+                    children: [
+                        {
+                            id: 'tailwind',
+                            label: 'Tailwind',
+                            component: TailwindDoc
+                        }
+                    ]
                 }
             ]
         };
diff --git a/doc/contextmenu/theming/TailwindDoc.vue b/doc/contextmenu/theming/TailwindDoc.vue
new file mode 100644
index 000000000..bd6128a95
--- /dev/null
+++ b/doc/contextmenu/theming/TailwindDoc.vue
@@ -0,0 +1,78 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
+            <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
+        </p>
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <DocSectionCode :code="code2" embedded />
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code1: {
+                basic: `
+xport default {
+    contextmenu: {
+        root: 'py-1 bg-white dark:bg-gray-900 text-gray-700 dark:text-white/80 border-none shadow-md rounded-lg w-52',
+        menu: {
+            class: ['m-0 p-0 list-none', 'outline-none']
+        },
+        menuitem: 'relative',
+        content: ({ context }) => ({
+            class: [
+                'transition-shadow duration-200 rounded-none',
+                'hover:text-gray-700 dark:hover:text-white/80 hover:bg-gray-200 dark:hover:bg-gray-800/80', // Hover
+                {
+                    'text-gray-700': !context.focused && !context.active,
+                    'bg-gray-300 text-gray-700 dark:text-white/80 dark:bg-gray-800/90': context.focused && !context.active,
+                    'bg-blue-500 text-blue-700 dark:bg-blue-400 dark:text-white/80': context.focused && context.active,
+                    'bg-blue-50 text-blue-700 dark:bg-blue-300 dark:text-white/80': !context.focused && context.active
+                }
+            ]
+        }),
+        action: {
+            class: ['cursor-pointer flex items-center no-underline overflow-hidden relative', 'text-gray-700 dark:text-white/80 py-3 px-5 select-none']
+        },
+        icon: 'text-gray-600 dark:text-white/70 mr-2',
+        label: 'text-gray-600 dark:text-white/70',
+        transition: {
+            enterFromClass: 'opacity-0',
+            enterActiveClass: 'transition-opacity duration-250'
+        }
+    }
+}
+`
+            },
+            code2: {
+                composition: `
+<template>
+    <div class="card">
+        <img alt="Logo" src="https://primefaces.org/cdn/primevue/images/nature/nature3.jpg" @contextmenu="onImageRightClick" class="w-full md:w-auto" aria-haspopup="true" />
+        <ContextMenu ref="menu" :model="items" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const menu = ref();
+const items = ref([
+    { label: 'View', icon: 'pi pi-fw pi-search' },
+    { label: 'Delete', icon: 'pi pi-fw pi-trash' }
+]);
+
+const onImageRightClick = (event) => {
+    menu.value.show(event);
+};
+
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/contextmenu/theming/UnstyledDoc.vue b/doc/contextmenu/theming/UnstyledDoc.vue
deleted file mode 100644
index 192232b92..000000000
--- a/doc/contextmenu/theming/UnstyledDoc.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
-    </DocSectionText>
-    <DocSectionCode :code="code" embedded />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                composition: `
-<template>
-    <div class="card">
-        <img alt="Logo" src="https://primefaces.org/cdn/primevue/images/nature/nature3.jpg" @contextmenu="onImageRightClick" class="w-full md:w-auto" aria-haspopup="true" />
-        <ContextMenu ref="menu" :model="items" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const menu = ref();
-const items = ref([
-    { label: 'View', icon: 'pi pi-fw pi-search' },
-    { label: 'Delete', icon: 'pi pi-fw pi-trash' }
-]);
-
-const onImageRightClick = (event) => {
-    menu.value.show(event);
-};
-
-<\/script>`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/contextmenu/theming/index.vue b/doc/contextmenu/theming/index.vue
index 108e1077b..d3de798e5 100644
--- a/doc/contextmenu/theming/index.vue
+++ b/doc/contextmenu/theming/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import StyledDoc from './StyledDoc.vue';
-import UnstyledDoc from './UnstyledDoc.vue';
+import TailwindDoc from './TailwindDoc.vue';
 
 export default {
     data() {
@@ -24,7 +24,14 @@ export default {
                 {
                     id: 'unstyled',
                     label: 'Unstyled',
-                    component: UnstyledDoc
+                    description: 'Theming is implemented with the pass through properties in unstyled mode.',
+                    children: [
+                        {
+                            id: 'tailwind',
+                            label: 'Tailwind',
+                            component: TailwindDoc
+                        }
+                    ]
                 }
             ]
         };
diff --git a/doc/datatable/theming/TailwindDoc.vue b/doc/datatable/theming/TailwindDoc.vue
new file mode 100644
index 000000000..59e713378
--- /dev/null
+++ b/doc/datatable/theming/TailwindDoc.vue
@@ -0,0 +1,538 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
+            <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
+        </p>
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <DocSectionCode :code="code2" :service="['CustomerService']" embedded />
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code1: {
+                basic: `
+export const TRANSITIONS = {
+    toggleable: {
+        enterFromClass: 'max-h-0',
+        enterActiveClass: 'overflow-hidden transition-all duration-500 ease-in-out',
+        enterToClass: 'max-h-40	',
+        leaveFromClass: 'max-h-40',
+        leaveActiveClass: 'overflow-hidden transition-all duration-500 ease-in',
+        leaveToClass: 'max-h-0'
+    },
+    overlay: {
+        enterFromClass: 'opacity-0 scale-75',
+        enterActiveClass: 'transition-transform transition-opacity duration-150 ease-in',
+        leaveActiveClass: 'transition-opacity duration-150 ease-linear',
+        leaveToClass: 'opacity-0'
+    }
+};
+
+export default {
+    datatable: {
+        root: ({ props }) => ({
+            class: [
+                'relative',
+                {
+                    'flex flex-col h-full': props.scrollable && props.scrollHeight === 'flex'
+                }
+            ]
+        }),
+        loadingoverlay: {
+            class: [
+                'fixed w-full h-full t-0 l-0 bg-gray-100/40',
+                'transition duration-200',
+                'absolute flex items-center justify-center z-2',
+                'dark:bg-gray-950/40' // Dark Mode
+            ]
+        },
+        loadingicon: 'w-8 h-8',
+        wrapper: ({ props }) => ({
+            class: [
+                {
+                    relative: props.scrollable,
+                    'flex flex-col grow h-full': props.scrollable && props.scrollHeight === 'flex'
+                }
+            ]
+        }),
+        header: ({ props }) => ({
+            class: [
+                'bg-slate-50 text-slate-700 border-gray-300 font-bold p-4',
+                'dark:border-blue-900/40 dark:text-white/80 dark:bg-gray-900', // Dark Mode
+                props.showGridlines ? 'border-x border-t border-b-0' : 'border-y border-x-0'
+            ]
+        }),
+        table: 'w-full border-spacing-0',
+        thead: ({ context }) => ({
+            class: [
+                {
+                    'bg-slate-50 top-0 z-[1]': context.scrollable
+                }
+            ]
+        }),
+        tbody: ({ instance, context }) => ({
+            class: [
+                {
+                    'sticky z-[1]': instance.frozenRow && context.scrollable
+                }
+            ]
+        }),
+        tfoot: ({ context }) => ({
+            class: [
+                {
+                    'bg-slate-50 bottom-0 z-[1]': context.scrollable
+                }
+            ]
+        }),
+        footer: {
+            class: [
+                'bg-slate-50 text-slate-700 border-t-0 border-b border-x-0 border-gray-300 font-bold p-4',
+                'dark:border-blue-900/40 dark:text-white/80 dark:bg-gray-900' // Dark Mode
+            ]
+        },
+        column: {
+            headercell: ({ context, props }) => ({
+                class: [
+                    'text-left border-0 border-b border-solid border-gray-300 dark:border-blue-900/40 font-bold',
+                    'transition duration-200',
+                    context?.size === 'small' ? 'p-2' : context?.size === 'large' ? 'p-5' : 'p-4', // Size
+                    context.sorted ? 'bg-blue-50 text-blue-700' : 'bg-slate-50 text-slate-700', // Sort
+                    context.sorted ? 'dark:text-white/80 dark:bg-blue-300' : 'dark:text-white/80 dark:bg-gray-900', // Dark Mode
+                    {
+                        'sticky z-[1]': props.frozen || props.frozen === '', // Frozen Columns
+                        'border-x border-y': context?.showGridlines,
+                        'overflow-hidden space-nowrap border-y relative bg-clip-padding': context.resizable // Resizable
+                    }
+                ]
+            }),
+            headercontent: 'flex items-center',
+            bodycell: ({ props, context }) => ({
+                class: [
+                    'text-left border-0 border-b border-solid border-gray-300',
+                    context?.size === 'small' ? 'p-2' : context?.size === 'large' ? 'p-5' : 'p-4', // Size
+                    'dark:text-white/80 dark:border-blue-900/40', // Dark Mode
+                    {
+                        'sticky bg-inherit': props.frozen || props.frozen === '', // Frozen Columns
+                        'border-x border-y': context?.showGridlines
+                    }
+                ]
+            }),
+            footercell: ({ context }) => ({
+                class: [
+                    'text-left border-0 border-b border-solid border-gray-300 font-bold',
+                    'bg-slate-50 text-slate-700',
+                    'transition duration-200',
+                    context?.size === 'small' ? 'p-2' : context?.size === 'large' ? 'p-5' : 'p-4', // Size
+                    'dark:text-white/80 dark:bg-gray-900 dark:border-blue-900/40', // Dark Mode
+                    {
+                        'border-x border-y': context?.showGridlines
+                    }
+                ]
+            }),
+            sorticon: ({ context }) => ({
+                class: ['ml-2', context.sorted ? 'text-blue-700 dark:text-white/80' : 'text-slate-700 dark:text-white/70']
+            }),
+            sortbadge: {
+                class: [
+                    'flex items-center justify-center align-middle',
+                    'rounded-[50%] w-[1.143rem] leading-[1.143rem] ml-2',
+                    'text-blue-700 bg-blue-50',
+                    'dark:text-white/80 dark:bg-blue-400' // Dark Mode
+                ]
+            },
+            columnfilter: 'inline-flex items-center ml-auto',
+            filteroverlay: {
+                class: [
+                    'bg-white text-gray-600 border-0 rounded-md min-w-[12.5rem]',
+                    'dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80' //Dark Mode
+                ]
+            },
+            filtermatchmodedropdown: {
+                root: 'min-[0px]:flex mb-2'
+            },
+            filterrowitems: 'm-0 p-0 py-3 list-none ',
+            filterrowitem: ({ context }) => ({
+                class: ['m-0 py-3 px-5 bg-transparent', 'transition duration-200', context?.highlighted ? 'text-blue-700 bg-blue-100 dark:text-white/80 dark:bg-blue-300' : 'text-gray-600 bg-transparent dark:text-white/80 dark:bg-transparent']
+            }),
+            filteroperator: {
+                class: [
+                    'px-5 py-3 border-b border-solid border-gray-300 text-slate-700 bg-slate-50 rounded-t-md',
+                    'dark:border-blue-900/40 dark:text-white/80 dark:bg-gray-900' // Dark Mode
+                ]
+            },
+            filteroperatordropdown: {
+                root: 'min-[0px]:flex'
+            },
+            filterconstraint: 'p-5 border-b border-solid border-gray-300 dark:border-blue-900/40',
+            filteraddrule: 'py-3 px-5',
+            filteraddrulebutton: {
+                root: 'justify-center w-full min-[0px]:text-sm',
+                label: 'flex-auto grow-0',
+                icon: 'mr-2'
+            },
+            filterremovebutton: {
+                root: 'ml-2',
+                label: 'grow-0'
+            },
+            filterbuttonbar: 'flex items-center justify-between p-5',
+            filterclearbutton: {
+                root: 'w-auto min-[0px]:text-sm border-blue-500 text-blue-500 px-4 py-3'
+            },
+            filterapplybutton: {
+                root: 'w-auto min-[0px]:text-sm px-4 py-3'
+            },
+            filtermenubutton: ({ context }) => ({
+                class: [
+                    'inline-flex justify-center items-center cursor-pointer no-underline overflow-hidden relative ml-2',
+                    'w-8 h-8 rounded-[50%]',
+                    'transition duration-200',
+                    'hover:text-slate-700 hover:bg-gray-300/20', // Hover
+                    'focus:outline-0 focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]', // Focus
+                    'dark:text-white/70 dark:hover:text-white/80 dark:bg-gray-900', // Dark Mode
+                    {
+                        'bg-blue-50 text-blue-700': context.active
+                    }
+                ]
+            }),
+            headerfilterclearbutton: ({ context }) => ({
+                class: [
+                    'inline-flex justify-center items-center cursor-pointer no-underline overflow-hidden relative',
+                    'text-left bg-transparent m-0 p-0 border-none select-none ml-2',
+                    {
+                        invisible: !context.hidden
+                    }
+                ]
+            }),
+            columnresizer: 'block absolute top-0 right-0 m-0 w-2 h-full p-0 cursor-col-resize border border-transparent',
+            rowreordericon: 'cursor-move',
+            roweditorinitbutton: {
+                class: [
+                    'inline-flex items-center justify-center overflow-hidden relative',
+                    'text-left cursor-pointer select-none',
+                    'w-8 h-8 border-0 rounded-[50%]',
+                    'transition duration-200',
+                    'text-slate-700 border-transparent',
+                    'focus:outline-0 focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]', //Focus
+                    'hover:text-slate-700 hover:bg-gray-300/20', //Hover
+                    'dark:text-white/70' // Dark Mode
+                ]
+            },
+            roweditorsavebutton: {
+                class: [
+                    'inline-flex items-center justify-center overflow-hidden relative',
+                    'text-left cursor-pointer select-none',
+                    'w-8 h-8 border-0 rounded-[50%]',
+                    'transition duration-200',
+                    'text-slate-700 border-transparent',
+                    'focus:outline-0 focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]', //Focus
+                    'hover:text-slate-700 hover:bg-gray-300/20', //Hover
+                    'dark:text-white/70' // Dark Mode
+                ]
+            },
+            roweditorcancelbutton: {
+                class: [
+                    'inline-flex items-center justify-center overflow-hidden relative',
+                    'text-left cursor-pointer select-none',
+                    'w-8 h-8 border-0 rounded-[50%]',
+                    'transition duration-200',
+                    'text-slate-700 border-transparent',
+                    'focus:outline-0 focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]', //Focus
+                    'hover:text-slate-700 hover:bg-gray-300/20', //Hover
+                    'dark:text-white/70' // Dark Mode
+                ]
+            },
+            radiobuttonwrapper: {
+                class: ['relative inline-flex cursor-pointer select-none align-bottom', 'w-6 h-6']
+            },
+            radiobutton: ({ context }) => ({
+                class: [
+                    'flex justify-center items-center',
+                    'border-2 w-6 h-6 text-gray-700 rounded-full transition duration-200 ease-in-out',
+                    context.checked ? 'border-blue-500 bg-blue-500 dark:border-blue-400 dark:bg-blue-400' : 'border-gray-300 bg-white dark:border-blue-900/40 dark:bg-gray-900',
+                    {
+                        'hover:border-blue-500 dark:hover:border-blue-400 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]': !context.disabled,
+                        'cursor-default opacity-60': context.disabled
+                    }
+                ]
+            }),
+            radiobuttonicon: ({ context }) => ({
+                class: ['transform rounded-full', 'block w-3 h-3 transition duration-200 bg-white dark:bg-gray-900', { 'backface-hidden scale-10 invisible': context.checked === false, 'transform scale-100 visible': context.checked === true }]
+            }),
+            headercheckboxwrapper: {
+                class: ['cursor-pointer inline-flex relative select-none align-bottom', 'w-6 h-6']
+            },
+            headercheckbox: ({ context }) => ({
+                class: [
+                    'flex items-center justify-center',
+                    'border-2 w-6 h-6 text-gray-600 rounded-lg transition-colors duration-200',
+                    context.checked ? 'border-blue-500 bg-blue-500 dark:border-blue-400 dark:bg-blue-400' : 'border-gray-300 bg-white dark:border-blue-900/40 dark:bg-gray-900',
+                    {
+                        'hover:border-blue-500 dark:hover:border-blue-400 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]': !context.disabled,
+                        'cursor-default opacity-60': context.disabled
+                    }
+                ]
+            }),
+            headercheckboxicon: 'w-4 h-4 transition-all duration-200 text-white text-base dark:text-gray-900',
+            checkboxwrapper: {
+                class: ['cursor-pointer inline-flex relative select-none align-bottom', 'w-6 h-6']
+            },
+            checkbox: ({ context }) => ({
+                class: [
+                    'flex items-center justify-center',
+                    'border-2 w-6 h-6 text-gray-600 rounded-lg transition-colors duration-200',
+                    context.checked ? 'border-blue-500 bg-blue-500 dark:border-blue-400 dark:bg-blue-400' : 'border-gray-300 bg-white dark:border-blue-900/40 dark:bg-gray-900',
+                    {
+                        'hover:border-blue-500 dark:hover:border-blue-400 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]': !context.disabled,
+                        'cursor-default opacity-60': context.disabled
+                    }
+                ]
+            }),
+            checkboxicon: 'w-4 h-4 transition-all duration-200 text-white text-base dark:text-gray-900',
+            transition: TRANSITIONS.overlay
+        },
+        bodyrow: ({ context }) => ({
+            class: [
+                context.selected ? 'bg-blue-50 text-blue-700 dark:bg-blue-300' : 'bg-white text-gray-600 dark:bg-gray-900',
+                context.stripedRows ? (context.index % 2 === 0 ? 'bg-white text-gray-600 dark:bg-gray-900' : 'bg-blue-50/50 text-gray-600 dark:bg-gray-950') : '',
+                'transition duration-200',
+                'focus:outline focus:outline-[0.15rem] focus:outline-blue-200 focus:outline-offset-[-0.15rem]', // Focus
+                'dark:text-white/80 dark:focus:outline dark:focus:outline-[0.15rem] dark:focus:outline-blue-300 dark:focus:outline-offset-[-0.15rem]', // Dark Mode
+                {
+                    'cursor-pointer': context.selectable,
+                    'hover:bg-gray-300/20 hover:text-gray-600': context.selectable && !context.selected // Hover
+                }
+            ]
+        }),
+        rowexpansion: 'bg-white text-gray-600 dark:bg-gray-900 dark:text-white/80',
+        rowgroupheader: {
+            class: ['sticky z-[1]', 'bg-white text-gray-600', 'transition duration-200']
+        },
+        rowgroupfooter: {
+            class: ['sticky z-[1]', 'bg-white text-gray-600', 'transition duration-200']
+        },
+        rowgrouptoggler: {
+            class: [
+                'text-left m-0 p-0 cursor-pointer select-none',
+                'inline-flex items-center justify-center overflow-hidden relative',
+                'w-8 h-8 text-gray-500 border-0 bg-transparent rounded-[50%]',
+                'transition duration-200',
+                'dark:text-white/70' // Dark Mode
+            ]
+        },
+        rowgrouptogglericon: 'inline-block w-4 h-4',
+        resizehelper: 'absolute hidden w-px z-10 bg-blue-500 dark:bg-blue-300'
+    }
+}
+`
+            },
+            code2: {
+                composition: `
+<template>
+    <div class="card">
+        <DataTable v-model:filters="filters" :value="customers" paginator showGridlines :rows="10" dataKey="id"
+                filterDisplay="menu" :loading="loading" :globalFilterFields="['name', 'country.name', 'representative.name', 'balance', 'status']">
+            <template #header>
+                <div class="flex justify-between">
+                    <Button type="button" icon="pi pi-filter-slash" label="Clear" outlined @click="clearFilter()" />
+                    <span class="p-input-icon-left">
+                        <i class="pi pi-search" />
+                        <InputText v-model="filters['global'].value" placeholder="Keyword Search" />
+                    </span>
+                </div>
+            </template>
+            <template #empty> No customers found. </template>
+            <template #loading> Loading customers data. Please wait. </template>
+            <Column field="name" header="Name" style="min-width: 12rem">
+                <template #body="{ data }">
+                    {{ data.name }}
+                </template>
+                <template #filter="{ filterModel }">
+                    <InputText v-model="filterModel.value" type="text" class="p-column-filter" placeholder="Search by name" />
+                </template>
+            </Column>
+            <Column header="Country" filterField="country.name" style="min-width: 12rem">
+                <template #body="{ data }">
+                    <div class="flex items-center gap-2">
+                        <img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${data.country.code}\`" style="width: 24px" />
+                        <span>{{ data.country.name }}</span>
+                    </div>
+                </template>
+                <template #filter="{ filterModel }">
+                    <InputText v-model="filterModel.value" type="text" class="p-column-filter" placeholder="Search by country" />
+                </template>
+                <template #filterclear="{ filterCallback }">
+                    <Button type="button" icon="pi pi-times" @click="filterCallback()" severity="secondary"></Button>
+                </template>
+                <template #filterapply="{ filterCallback }">
+                    <Button type="button" icon="pi pi-check" @click="filterCallback()" severity="success"></Button>
+                </template>
+                <template #filterfooter>
+                    <div class="px-3 pt-0 pb-3 text-center">Customized Buttons</div>
+                </template>
+            </Column>
+            <Column header="Agent" filterField="representative" :showFilterMatchModes="false" :filterMenuStyle="{ width: '14rem' }" style="min-width: 14rem">
+                <template #body="{ data }">
+                    <div class="flex items-center gap-2">
+                        <img :alt="data.representative.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${data.representative.image}\`" style="width: 32px" />
+                        <span>{{ data.representative.name }}</span>
+                    </div>
+                </template>
+                <template #filter="{ filterModel }">
+                    <MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any" class="p-column-filter">
+                        <template #option="slotProps">
+                            <div class="flex items-center gap-2">
+                                <img :alt="slotProps.option.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${slotProps.option.image}\`" style="width: 32px" />
+                                <span>{{ slotProps.option.name }}</span>
+                            </div>
+                        </template>
+                    </MultiSelect>
+                </template>
+            </Column>
+            <Column header="Date" filterField="date" dataType="date" style="min-width: 10rem">
+                <template #body="{ data }">
+                    {{ formatDate(data.date) }}
+                </template>
+                <template #filter="{ filterModel }">
+                    <Calendar v-model="filterModel.value" dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" mask="99/99/9999" />
+                </template>
+            </Column>
+            <Column header="Balance" filterField="balance" dataType="numeric" style="min-width: 10rem">
+                <template #body="{ data }">
+                    {{ formatCurrency(data.balance) }}
+                </template>
+                <template #filter="{ filterModel }">
+                    <InputNumber v-model="filterModel.value" mode="currency" currency="USD" locale="en-US" />
+                </template>
+            </Column>
+            <Column header="Status" field="status" :filterMenuStyle="{ width: '14rem' }" style="min-width: 12rem">
+                <template #body="{ data }">
+                    <Tag :value="data.status" :severity="getSeverity(data.status)" />
+                </template>
+                <template #filter="{ filterModel }">
+                    <Dropdown v-model="filterModel.value" :options="statuses" placeholder="Select One" class="p-column-filter" showClear>
+                        <template #option="slotProps">
+                            <Tag :value="slotProps.option" :severity="getSeverity(slotProps.option)" />
+                        </template>
+                    </Dropdown>
+                </template>
+            </Column>
+            <Column field="activity" header="Activity" :showFilterMatchModes="false" style="min-width: 12rem">
+                <template #body="{ data }">
+                    <ProgressBar :value="data.activity" :showValue="false" style="height: 6px"></ProgressBar>
+                </template>
+                <template #filter="{ filterModel }">
+                    <Slider v-model="filterModel.value" range class="m-3"></Slider>
+                    <div class="flex items-center justify-between px-2">
+                        <span>{{ filterModel.value ? filterModel.value[0] : 0 }}</span>
+                        <span>{{ filterModel.value ? filterModel.value[1] : 100 }}</span>
+                    </div>
+                </template>
+            </Column>
+            <Column field="verified" header="Verified" dataType="boolean" bodyClass="text-center" style="min-width: 8rem">
+                <template #body="{ data }">
+                    <i class="pi" :class="{ 'pi-check-circle text-green-500 ': data.verified, 'pi-times-circle text-red-500': !data.verified }"></i>
+                </template>
+                <template #filter="{ filterModel }">
+                    <label for="verified-filter" class="font-bold"> Verified </label>
+                    <TriStateCheckbox v-model="filterModel.value" inputId="verified-filter" />
+                </template>
+            </Column>
+        </DataTable>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { CustomerService } from '@/service/CustomerService';
+import { FilterMatchMode, FilterOperator } from 'primevue/api';
+
+const customers = ref();
+const filters = ref();
+const representatives = ref([
+    { name: 'Amy Elsner', image: 'amyelsner.png' },
+    { name: 'Anna Fali', image: 'annafali.png' },
+    { name: 'Asiya Javayant', image: 'asiyajavayant.png' },
+    { name: 'Bernardo Dominic', image: 'bernardodominic.png' },
+    { name: 'Elwin Sharvill', image: 'elwinsharvill.png' },
+    { name: 'Ioni Bowcher', image: 'ionibowcher.png' },
+    { name: 'Ivan Magalhaes', image: 'ivanmagalhaes.png' },
+    { name: 'Onyama Limba', image: 'onyamalimba.png' },
+    { name: 'Stephen Shaw', image: 'stephenshaw.png' },
+    { name: 'XuXue Feng', image: 'xuxuefeng.png' }
+]);
+const statuses = ref(['unqualified', 'qualified', 'new', 'negotiation', 'renewal', 'proposal']);
+const loading = ref(true);
+
+onMounted(() => {
+    CustomerService.getCustomersMedium().then((data) => {
+        customers.value = getCustomers(data);
+        loading.value = false;
+    });
+});
+
+
+const initFilters = () => {
+    filters.value = {
+        global: { value: null, matchMode: FilterMatchMode.CONTAINS },
+        name: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
+        'country.name': { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
+        representative: { value: null, matchMode: FilterMatchMode.IN },
+        date: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.DATE_IS }] },
+        balance: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
+        status: { operator: FilterOperator.OR, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
+        activity: { value: [0, 100], matchMode: FilterMatchMode.BETWEEN },
+        verified: { value: null, matchMode: FilterMatchMode.EQUALS }
+    };
+};
+
+initFilters();
+
+const formatDate = (value) => {
+    return value.toLocaleDateString('en-US', {
+        day: '2-digit',
+        month: '2-digit',
+        year: 'numeric'
+    });
+};
+const formatCurrency = (value) => {
+    return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
+};
+const clearFilter = () => {
+    initFilters();
+};
+const getCustomers = (data) => {
+    return [...(data || [])].map((d) => {
+        d.date = new Date(d.date);
+
+        return d;
+    });
+};
+const getSeverity = (status) => {
+    switch (status) {
+        case 'unqualified':
+            return 'danger';
+
+        case 'qualified':
+            return 'success';
+
+        case 'new':
+            return 'info';
+
+        case 'negotiation':
+            return 'warning';
+
+        case 'renewal':
+            return null;
+    }
+};
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/datatable/theming/UnstyledDoc.vue b/doc/datatable/theming/UnstyledDoc.vue
deleted file mode 100644
index 0a9bc65b6..000000000
--- a/doc/datatable/theming/UnstyledDoc.vue
+++ /dev/null
@@ -1,217 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
-    </DocSectionText>
-    <DocSectionCode :code="code" :service="['CustomerService']" embedded />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                composition: `
-<template>
-    <div class="card">
-        <DataTable v-model:filters="filters" :value="customers" paginator showGridlines :rows="10" dataKey="id"
-                filterDisplay="menu" :loading="loading" :globalFilterFields="['name', 'country.name', 'representative.name', 'balance', 'status']">
-            <template #header>
-                <div class="flex justify-between">
-                    <Button type="button" icon="pi pi-filter-slash" label="Clear" outlined @click="clearFilter()" />
-                    <span class="p-input-icon-left">
-                        <i class="pi pi-search" />
-                        <InputText v-model="filters['global'].value" placeholder="Keyword Search" />
-                    </span>
-                </div>
-            </template>
-            <template #empty> No customers found. </template>
-            <template #loading> Loading customers data. Please wait. </template>
-            <Column field="name" header="Name" style="min-width: 12rem">
-                <template #body="{ data }">
-                    {{ data.name }}
-                </template>
-                <template #filter="{ filterModel }">
-                    <InputText v-model="filterModel.value" type="text" class="p-column-filter" placeholder="Search by name" />
-                </template>
-            </Column>
-            <Column header="Country" filterField="country.name" style="min-width: 12rem">
-                <template #body="{ data }">
-                    <div class="flex items-center gap-2">
-                        <img alt="flag" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${data.country.code}\`" style="width: 24px" />
-                        <span>{{ data.country.name }}</span>
-                    </div>
-                </template>
-                <template #filter="{ filterModel }">
-                    <InputText v-model="filterModel.value" type="text" class="p-column-filter" placeholder="Search by country" />
-                </template>
-                <template #filterclear="{ filterCallback }">
-                    <Button type="button" icon="pi pi-times" @click="filterCallback()" severity="secondary"></Button>
-                </template>
-                <template #filterapply="{ filterCallback }">
-                    <Button type="button" icon="pi pi-check" @click="filterCallback()" severity="success"></Button>
-                </template>
-                <template #filterfooter>
-                    <div class="px-3 pt-0 pb-3 text-center">Customized Buttons</div>
-                </template>
-            </Column>
-            <Column header="Agent" filterField="representative" :showFilterMatchModes="false" :filterMenuStyle="{ width: '14rem' }" style="min-width: 14rem">
-                <template #body="{ data }">
-                    <div class="flex items-center gap-2">
-                        <img :alt="data.representative.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${data.representative.image}\`" style="width: 32px" />
-                        <span>{{ data.representative.name }}</span>
-                    </div>
-                </template>
-                <template #filter="{ filterModel }">
-                    <MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any" class="p-column-filter">
-                        <template #option="slotProps">
-                            <div class="flex items-center gap-2">
-                                <img :alt="slotProps.option.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${slotProps.option.image}\`" style="width: 32px" />
-                                <span>{{ slotProps.option.name }}</span>
-                            </div>
-                        </template>
-                    </MultiSelect>
-                </template>
-            </Column>
-            <Column header="Date" filterField="date" dataType="date" style="min-width: 10rem">
-                <template #body="{ data }">
-                    {{ formatDate(data.date) }}
-                </template>
-                <template #filter="{ filterModel }">
-                    <Calendar v-model="filterModel.value" dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" mask="99/99/9999" />
-                </template>
-            </Column>
-            <Column header="Balance" filterField="balance" dataType="numeric" style="min-width: 10rem">
-                <template #body="{ data }">
-                    {{ formatCurrency(data.balance) }}
-                </template>
-                <template #filter="{ filterModel }">
-                    <InputNumber v-model="filterModel.value" mode="currency" currency="USD" locale="en-US" />
-                </template>
-            </Column>
-            <Column header="Status" field="status" :filterMenuStyle="{ width: '14rem' }" style="min-width: 12rem">
-                <template #body="{ data }">
-                    <Tag :value="data.status" :severity="getSeverity(data.status)" />
-                </template>
-                <template #filter="{ filterModel }">
-                    <Dropdown v-model="filterModel.value" :options="statuses" placeholder="Select One" class="p-column-filter" showClear>
-                        <template #option="slotProps">
-                            <Tag :value="slotProps.option" :severity="getSeverity(slotProps.option)" />
-                        </template>
-                    </Dropdown>
-                </template>
-            </Column>
-            <Column field="activity" header="Activity" :showFilterMatchModes="false" style="min-width: 12rem">
-                <template #body="{ data }">
-                    <ProgressBar :value="data.activity" :showValue="false" style="height: 6px"></ProgressBar>
-                </template>
-                <template #filter="{ filterModel }">
-                    <Slider v-model="filterModel.value" range class="m-3"></Slider>
-                    <div class="flex items-center justify-between px-2">
-                        <span>{{ filterModel.value ? filterModel.value[0] : 0 }}</span>
-                        <span>{{ filterModel.value ? filterModel.value[1] : 100 }}</span>
-                    </div>
-                </template>
-            </Column>
-            <Column field="verified" header="Verified" dataType="boolean" bodyClass="text-center" style="min-width: 8rem">
-                <template #body="{ data }">
-                    <i class="pi" :class="{ 'pi-check-circle text-green-500 ': data.verified, 'pi-times-circle text-red-500': !data.verified }"></i>
-                </template>
-                <template #filter="{ filterModel }">
-                    <label for="verified-filter" class="font-bold"> Verified </label>
-                    <TriStateCheckbox v-model="filterModel.value" inputId="verified-filter" />
-                </template>
-            </Column>
-        </DataTable>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-import { CustomerService } from '@/service/CustomerService';
-import { FilterMatchMode, FilterOperator } from 'primevue/api';
-
-const customers = ref();
-const filters = ref();
-const representatives = ref([
-    { name: 'Amy Elsner', image: 'amyelsner.png' },
-    { name: 'Anna Fali', image: 'annafali.png' },
-    { name: 'Asiya Javayant', image: 'asiyajavayant.png' },
-    { name: 'Bernardo Dominic', image: 'bernardodominic.png' },
-    { name: 'Elwin Sharvill', image: 'elwinsharvill.png' },
-    { name: 'Ioni Bowcher', image: 'ionibowcher.png' },
-    { name: 'Ivan Magalhaes', image: 'ivanmagalhaes.png' },
-    { name: 'Onyama Limba', image: 'onyamalimba.png' },
-    { name: 'Stephen Shaw', image: 'stephenshaw.png' },
-    { name: 'XuXue Feng', image: 'xuxuefeng.png' }
-]);
-const statuses = ref(['unqualified', 'qualified', 'new', 'negotiation', 'renewal', 'proposal']);
-const loading = ref(true);
-
-onMounted(() => {
-    CustomerService.getCustomersMedium().then((data) => {
-        customers.value = getCustomers(data);
-        loading.value = false;
-    });
-});
-
-
-const initFilters = () => {
-    filters.value = {
-        global: { value: null, matchMode: FilterMatchMode.CONTAINS },
-        name: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
-        'country.name': { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
-        representative: { value: null, matchMode: FilterMatchMode.IN },
-        date: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.DATE_IS }] },
-        balance: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
-        status: { operator: FilterOperator.OR, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
-        activity: { value: [0, 100], matchMode: FilterMatchMode.BETWEEN },
-        verified: { value: null, matchMode: FilterMatchMode.EQUALS }
-    };
-};
-
-initFilters();
-
-const formatDate = (value) => {
-    return value.toLocaleDateString('en-US', {
-        day: '2-digit',
-        month: '2-digit',
-        year: 'numeric'
-    });
-};
-const formatCurrency = (value) => {
-    return value.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
-};
-const clearFilter = () => {
-    initFilters();
-};
-const getCustomers = (data) => {
-    return [...(data || [])].map((d) => {
-        d.date = new Date(d.date);
-
-        return d;
-    });
-};
-const getSeverity = (status) => {
-    switch (status) {
-        case 'unqualified':
-            return 'danger';
-
-        case 'qualified':
-            return 'success';
-
-        case 'new':
-            return 'info';
-
-        case 'negotiation':
-            return 'warning';
-
-        case 'renewal':
-            return null;
-    }
-};
-<\/script>`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/datatable/theming/index.vue b/doc/datatable/theming/index.vue
index 4417e7dc0..20570ca75 100644
--- a/doc/datatable/theming/index.vue
+++ b/doc/datatable/theming/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import StyledDoc from './StyledDoc.vue';
-import UnstyledDoc from './UnstyledDoc.vue';
+import TailwindDoc from './TailwindDoc.vue';
 
 export default {
     data() {
@@ -24,7 +24,14 @@ export default {
                 {
                     id: 'unstyled',
                     label: 'Unstyled',
-                    component: UnstyledDoc
+                    description: 'Theming is implemented with the pass through properties in unstyled mode.',
+                    children: [
+                        {
+                            id: 'tailwind',
+                            label: 'Tailwind',
+                            component: TailwindDoc
+                        }
+                    ]
                 }
             ]
         };
diff --git a/doc/dataview/theming/UnstyledDoc.vue b/doc/dataview/theming/TailwindDoc.vue
similarity index 67%
rename from doc/dataview/theming/UnstyledDoc.vue
rename to doc/dataview/theming/TailwindDoc.vue
index f5b3a4f46..5fc851154 100644
--- a/doc/dataview/theming/UnstyledDoc.vue
+++ b/doc/dataview/theming/TailwindDoc.vue
@@ -1,15 +1,54 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
+        <p>
+            PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
+            <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
+        </p>
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <DocSectionCode :code="code2" :service="['ProductService']" embedded />
     </DocSectionText>
-    <DocSectionCode :code="code" :service="['ProductService']" embedded />
 </template>
 
 <script>
 export default {
     data() {
         return {
-            code: {
+            code1: {
+                basic: `
+export default {
+    dataview: {
+        content: {
+            class: [
+                'bg-white blue-gray-700 border-0 p-0',
+                'dark:bg-gray-900 dark:text-white/80' // Dark Mode
+            ]
+        },
+        grid: 'flex flex-wrap ml-0 mr-0 mt-0 bg-white dark:bg-gray-900',
+        header: 'bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-white/80 border-gray-200 dark:border-blue-900/40 border-t border-b p-4 font-bold'
+    },
+    dataviewlayoutoptions: {
+        listbutton: ({ props }) => ({
+            class: [
+                'items-center cursor-pointer inline-flex overflow-hidden relative select-none text-center align-bottom justify-center border',
+                'transition duration-200',
+                'w-12 pt-3 pb-3 rounded-lg rounded-r-none',
+                props.modelValue === 'list' ? 'bg-blue-500 border-blue-500 text-white dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900' : 'bg-white border-gray-300 text-blue-gray-700 dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80' // highlighted state
+            ]
+        }),
+        gridbutton: ({ props }) => ({
+            class: [
+                'items-center cursor-pointer inline-flex overflow-hidden relative select-none text-center align-bottom justify-center border',
+                'transition duration-200',
+                'w-12 pt-3 pb-3 rounded-lg rounded-l-none',
+                props.modelValue === 'grid' ? 'bg-blue-500 border-blue-500 text-white dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900' : 'bg-white border-gray-300 text-blue-gray-700 dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80' // highlighted state
+            ]
+        })
+    }
+}
+`
+            },
+            code2: {
                 composition: `
 <template>
     <div class="card">
@@ -100,23 +139,7 @@ const getSeverity = (product) => {
     }
 }
 
-<\/script>`,
-                data: `
-/* ProductService */        
-{
-    id: '1000',
-    code: 'f230fh0g3',
-    name: 'Bamboo Watch',
-    description: 'Product Description',
-    image: 'bamboo-watch.jpg',
-    price: 65,
-    category: 'Accessories',
-    quantity: 24,
-    inventoryStatus: 'INSTOCK',
-    rating: 5
-},
-...
-        `
+<\/script>`
             }
         };
     }
diff --git a/doc/dataview/theming/index.vue b/doc/dataview/theming/index.vue
index 0333a0c6c..2de54104d 100644
--- a/doc/dataview/theming/index.vue
+++ b/doc/dataview/theming/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import StyledDoc from './StyledDoc.vue';
-import UnstyledDoc from './UnstyledDoc.vue';
+import TailwindDoc from './TailwindDoc.vue';
 
 export default {
     data() {
@@ -24,7 +24,14 @@ export default {
                 {
                     id: 'unstyled',
                     label: 'Unstyled',
-                    component: UnstyledDoc
+                    description: 'Theming is implemented with the pass through properties in unstyled mode.',
+                    children: [
+                        {
+                            id: 'tailwind',
+                            label: 'Tailwind',
+                            component: TailwindDoc
+                        }
+                    ]
                 }
             ]
         };
diff --git a/doc/dock/theming/TailwindDoc.vue b/doc/dock/theming/TailwindDoc.vue
new file mode 100644
index 000000000..ec71d4ad0
--- /dev/null
+++ b/doc/dock/theming/TailwindDoc.vue
@@ -0,0 +1,147 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
+            <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
+        </p>
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <DocSectionCode :code="code2" embedded />
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code1: {
+                basic: `
+export default {
+    dock: {
+        root: ({ props }) => ({
+            class: [
+                'absolute z-1 flex justify-center items-center pointer-events-none',
+                {
+                    'left-0 bottom-0 w-full': props.position == 'bottom',
+                    'left-0 top-0 w-full': props.position == 'top',
+                    'left-0 top-0 h-full': props.position == 'left',
+                    'right-0 top-0 h-full': props.position == 'right'
+                }
+            ]
+        }),
+        container: {
+            class: ['flex pointer-events-auto', 'bg-white/10 border-white/20 p-2 border rounded-md']
+        },
+        menu: ({ props }) => ({
+            class: [
+                'm-0 p-0 list-none flex items-center justify-center',
+                'outline-none',
+                {
+                    'flex-col': props.position == 'left' || props.position == 'right'
+                }
+            ]
+        }),
+        menuitem: ({ props, context, instance }) => ({
+            class: [
+                'p-2 rounded-md',
+                'transition-all duration-200 ease-cubic-bezier-will-change-transform transform ',
+                {
+                    'origin-bottom hover:mx-6': props.position == 'bottom',
+                    'origin-top hover:mx-6': props.position == 'top',
+                    'origin-left hover:my-6': props.position == 'left',
+                    'origin-right hover:my-6': props.position == 'right'
+                },
+                {
+                    'hover:scale-150': instance.currentIndex === context.index,
+                    'scale-125': instance.currentIndex - 1 === context.index || instance.currentIndex + 1 === context.index,
+                    'scale-110': instance.currentIndex - 2 === context.index || instance.currentIndex + 2 === context.index
+                }
+            ]
+        }),
+        action: {
+            class: ['flex flex-col items-center justify-center relative overflow-hidden cursor-default', 'w-16 h-16']
+        }
+    }
+}
+`
+            },
+            code2: {
+                composition: `
+<template>
+    <div class="card dock-demo">
+        <div class="flex flex-wrap gap-3 mb-5">
+            <div v-for="pos of positions" :key="pos.label" class="flex items-center">
+                <RadioButton v-model="position" :value="pos.value" :inputId="pos.label" name="dock" />
+                <label :for="pos.label" class="text-gray-700 dark:text-white/80 ml-2"> {{ pos.label }} </label>
+            </div>
+        </div>
+        <div class="dock-window" style="backgroundimage: 'url(https://primefaces.org/cdn/primevue/images/dock/window.jpg))'">
+            <Dock :model="items" :position="position">
+                <template #icon="{ item }">
+                    <img :alt="item.label" :src="item.icon" style="width: 100%" />
+                </template>
+            </Dock>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const items = ref([
+    {
+        label: 'Finder',
+        icon: 'https://primefaces.org/cdn/primevue/images/dock/finder.svg'
+    },
+    {
+        label: 'App Store',
+        icon: 'https://primefaces.org/cdn/primevue/images/dock/appstore.svg'
+    },
+    {
+        label: 'Photos',
+        icon: 'https://primefaces.org/cdn/primevue/images/dock/photos.svg'
+    },
+    {
+        label: 'Trash',
+        icon: 'https://primefaces.org/cdn/primevue/images/dock/trash.png'
+    }
+]);
+const position = ref('bottom');
+const positions = ref([
+    {
+        label: 'Bottom',
+        value: 'bottom'
+    },
+    {
+        label: 'Top',
+        value: 'top'
+    },
+    {
+        label: 'Left',
+        value: 'left'
+    },
+    {
+        label: 'Right',
+        value: 'right'
+    }
+]);
+
+<\/script>
+
+<style scoped>
+.dock-demo > .dock-window {
+    width: 100%;
+    height: 450px;
+    position: relative;
+    background-image: url("https://primefaces.org/cdn/primevue/images/dock/window.jpg");
+    background-repeat: no-repeat;
+    background-size: cover;
+    z-index: 1;
+}
+</style>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/dock/theming/UnstyledDoc.vue b/doc/dock/theming/UnstyledDoc.vue
deleted file mode 100644
index 74dda0179..000000000
--- a/doc/dock/theming/UnstyledDoc.vue
+++ /dev/null
@@ -1,91 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
-    </DocSectionText>
-    <DocSectionCode :code="code" embedded />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                composition: `
-<template>
-    <div class="card dock-demo">
-        <div class="flex flex-wrap gap-3 mb-5">
-            <div v-for="pos of positions" :key="pos.label" class="flex items-center">
-                <RadioButton v-model="position" :value="pos.value" :inputId="pos.label" name="dock" />
-                <label :for="pos.label" class="text-gray-700 dark:text-white/80 ml-2"> {{ pos.label }} </label>
-            </div>
-        </div>
-        <div class="dock-window" style="backgroundimage: 'url(https://primefaces.org/cdn/primevue/images/dock/window.jpg))'">
-            <Dock :model="items" :position="position">
-                <template #icon="{ item }">
-                    <img :alt="item.label" :src="item.icon" style="width: 100%" />
-                </template>
-            </Dock>
-        </div>
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const items = ref([
-    {
-        label: 'Finder',
-        icon: 'https://primefaces.org/cdn/primevue/images/dock/finder.svg'
-    },
-    {
-        label: 'App Store',
-        icon: 'https://primefaces.org/cdn/primevue/images/dock/appstore.svg'
-    },
-    {
-        label: 'Photos',
-        icon: 'https://primefaces.org/cdn/primevue/images/dock/photos.svg'
-    },
-    {
-        label: 'Trash',
-        icon: 'https://primefaces.org/cdn/primevue/images/dock/trash.png'
-    }
-]);
-const position = ref('bottom');
-const positions = ref([
-    {
-        label: 'Bottom',
-        value: 'bottom'
-    },
-    {
-        label: 'Top',
-        value: 'top'
-    },
-    {
-        label: 'Left',
-        value: 'left'
-    },
-    {
-        label: 'Right',
-        value: 'right'
-    }
-]);
-
-<\/script>
-
-<style scoped>
-.dock-demo > .dock-window {
-    width: 100%;
-    height: 450px;
-    position: relative;
-    background-image: url("https://primefaces.org/cdn/primevue/images/dock/window.jpg");
-    background-repeat: no-repeat;
-    background-size: cover;
-    z-index: 1;
-}
-</style>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/dock/theming/index.vue b/doc/dock/theming/index.vue
index 196fc49f8..bc323ce94 100644
--- a/doc/dock/theming/index.vue
+++ b/doc/dock/theming/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import StyledDoc from './StyledDoc.vue';
-import UnstyledDoc from './UnstyledDoc.vue';
+import TailwindDoc from './TailwindDoc.vue';
 
 export default {
     data() {
@@ -24,7 +24,14 @@ export default {
                 {
                     id: 'unstyled',
                     label: 'Unstyled',
-                    component: UnstyledDoc
+                    description: 'Theming is implemented with the pass through properties in unstyled mode.',
+                    children: [
+                        {
+                            id: 'tailwind',
+                            label: 'Tailwind',
+                            component: TailwindDoc
+                        }
+                    ]
                 }
             ]
         };
diff --git a/doc/dropdown/theming/TailwindDoc.vue b/doc/dropdown/theming/TailwindDoc.vue
new file mode 100644
index 000000000..a6e325c8b
--- /dev/null
+++ b/doc/dropdown/theming/TailwindDoc.vue
@@ -0,0 +1,126 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
+            <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
+        </p>
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <DocSectionCode :code="code2" embedded />
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code1: {
+                basic: `
+export const TRANSITIONS = {
+    toggleable: {
+        enterFromClass: 'max-h-0',
+        enterActiveClass: 'overflow-hidden transition-all duration-500 ease-in-out',
+        enterToClass: 'max-h-40	',
+        leaveFromClass: 'max-h-40',
+        leaveActiveClass: 'overflow-hidden transition-all duration-500 ease-in',
+        leaveToClass: 'max-h-0'
+    },
+    overlay: {
+        enterFromClass: 'opacity-0 scale-75',
+        enterActiveClass: 'transition-transform transition-opacity duration-150 ease-in',
+        leaveActiveClass: 'transition-opacity duration-150 ease-linear',
+        leaveToClass: 'opacity-0'
+    }
+};
+
+export default {
+    dropdown: {
+        root: ({ props }) => ({
+            class: [
+                'cursor-pointer inline-flex relative select-none',
+                'bg-white border border-gray-400 transition-colors duration-200 ease-in-out rounded-md',
+                'dark:bg-gray-900 dark:border-blue-900/40 dark:hover:border-blue-300',
+                'w-full md:w-56',
+                'hover:border-blue-500 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]',
+                { 'opacity-60 select-none pointer-events-none cursor-default': props.disabled }
+            ]
+        }),
+        input: ({ props }) => ({
+            class: [
+                'cursor-pointer block flex flex-auto overflow-hidden overflow-ellipsis whitespace-nowrap relative',
+                'bg-transparent border-0 text-gray-800',
+                'dark:text-white/80',
+                'p-3 transition duration-200 bg-transparent rounded appearance-none font-sans text-base',
+                'focus:outline-none focus:shadow-none',
+                { 'pr-7': props.showClear }
+            ]
+        }),
+        trigger: {
+            class: ['flex items-center justify-center shrink-0', 'bg-transparent text-gray-500 w-12 rounded-tr-lg rounded-br-lg']
+        },
+        wrapper: {
+            class: ['max-h-[200px] overflow-auto', 'bg-white text-gray-700 border-0 rounded-md shadow-lg', 'dark:bg-gray-900 dark:text-white/80']
+        },
+        list: 'py-3 list-none m-0',
+        item: ({ context }) => ({
+            class: [
+                'cursor-pointer font-normal overflow-hidden relative whitespace-nowrap',
+                'm-0 p-3 border-0  transition-shadow duration-200 rounded-none',
+                'dark:text-white/80 dark:hover:bg-gray-800',
+                'hover:text-gray-700 hover:bg-gray-200',
+                {
+                    'text-gray-700': !context.focused && !context.selected,
+                    'bg-gray-300 text-gray-700 dark:text-white/80 dark:bg-gray-800/90': context.focused && !context.selected,
+                    'bg-blue-400 text-blue-700 dark:bg-blue-400 dark:text-white/80': context.focused && context.selected,
+                    'bg-blue-50 text-blue-700 dark:bg-blue-300 dark:text-white/80': !context.focused && context.selected
+                }
+            ]
+        }),
+        itemgroup: {
+            class: ['m-0 p-3 text-gray-800 bg-white font-bold', 'dark:bg-gray-900 dark:text-white/80', 'cursor-auto']
+        },
+        header: {
+            class: ['p-3 border-b border-gray-300 text-gray-700 bg-gray-100 mt-0 rounded-tl-lg rounded-tr-lg', 'dark:bg-gray-800 dark:text-white/80 dark:border-blue-900/40']
+        },
+        filtercontainer: 'relative',
+        filterinput: {
+            class: [
+                'pr-7 -mr-7',
+                'w-full',
+                'font-sans text-base text-gray-700 bg-white py-3 px-3 border border-gray-300 transition duration-200 rounded-lg appearance-none',
+                'dark:bg-gray-900 dark:border-blue-900/40 dark:hover:border-blue-300 dark:text-white/80',
+                'hover:border-blue-500 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]'
+            ]
+        },
+        filtericon: '-mt-2 absolute top-1/2',
+        clearicon: 'text-gray-500 right-12 -mt-2 absolute top-1/2',
+        transition: TRANSITIONS.overlay
+    }
+}
+`
+            },
+            code2: {
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Dropdown v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const selectedCity = ref();
+const cities = ref([
+    { name: 'New York', code: 'NY' },
+    { name: 'Rome', code: 'RM' },
+    { name: 'London', code: 'LDN' },
+    { name: 'Istanbul', code: 'IST' },
+    { name: 'Paris', code: 'PRS' }
+]);
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/dropdown/theming/UnstyledDoc.vue b/doc/dropdown/theming/UnstyledDoc.vue
deleted file mode 100644
index 87ecc8c67..000000000
--- a/doc/dropdown/theming/UnstyledDoc.vue
+++ /dev/null
@@ -1,36 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
-    </DocSectionText>
-    <DocSectionCode :code="code" embedded />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Dropdown v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" class="w-full md:w-14rem" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const selectedCity = ref();
-const cities = ref([
-    { name: 'New York', code: 'NY' },
-    { name: 'Rome', code: 'RM' },
-    { name: 'London', code: 'LDN' },
-    { name: 'Istanbul', code: 'IST' },
-    { name: 'Paris', code: 'PRS' }
-]);
-<\/script>`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/dropdown/theming/index.vue b/doc/dropdown/theming/index.vue
index 548ebcc5d..1c66f5c15 100644
--- a/doc/dropdown/theming/index.vue
+++ b/doc/dropdown/theming/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import StyledDoc from './StyledDoc.vue';
-import UnstyledDoc from './UnstyledDoc.vue';
+import TailwindDoc from './TailwindDoc.vue';
 
 export default {
     data() {
@@ -24,7 +24,14 @@ export default {
                 {
                     id: 'unstyled',
                     label: 'Unstyled',
-                    component: UnstyledDoc
+                    description: 'Theming is implemented with the pass through properties in unstyled mode.',
+                    children: [
+                        {
+                            id: 'tailwind',
+                            label: 'Tailwind',
+                            component: TailwindDoc
+                        }
+                    ]
                 }
             ]
         };
diff --git a/doc/editor/theming/TailwindDoc.vue b/doc/editor/theming/TailwindDoc.vue
new file mode 100644
index 000000000..28800f503
--- /dev/null
+++ b/doc/editor/theming/TailwindDoc.vue
@@ -0,0 +1,51 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
+            <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
+        </p>
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <DocSectionCode :code="code2" :dependencies="{ quill: '1.3.7' }" component="Editor" embedded />
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code1: {
+                basic: `
+export default {
+    editor: {
+        toolbar: {
+            class: ['bg-gray-100 rounded-tr-md rounded-tl-md', 'border border-gray-300 box-border font-sans px-2 py-1']
+        },
+        formats: {
+            class: ['inline-block align-middle', 'mr-4']
+        },
+        header: {
+            class: ['text-gray-700 inline-block float-left text-base font-medium h-6 relative align-middle', 'w-28', 'border-0 text-gray-600']
+        }
+    }
+}
+`
+            },
+            code2: {
+                composition: `
+<template>
+    <div class="card">
+        <Editor v-model="value" editorStyle="height: 320px" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const value = ref('');
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/editor/theming/UnstyledDoc.vue b/doc/editor/theming/UnstyledDoc.vue
deleted file mode 100644
index 405ff197e..000000000
--- a/doc/editor/theming/UnstyledDoc.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
-    </DocSectionText>
-    <DocSectionCode :code="code" :dependencies="{ quill: '1.3.7' }" component="Editor" embedded />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                composition: `
-<template>
-    <div class="card">
-        <Editor v-model="value" editorStyle="height: 320px" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const value = ref('');
-<\/script>`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/editor/theming/index.vue b/doc/editor/theming/index.vue
index 210927b7c..237b17564 100644
--- a/doc/editor/theming/index.vue
+++ b/doc/editor/theming/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import StyledDoc from './StyledDoc.vue';
-import UnstyledDoc from './UnstyledDoc.vue';
+import TailwindDoc from './TailwindDoc.vue';
 
 export default {
     data() {
@@ -24,7 +24,14 @@ export default {
                 {
                     id: 'unstyled',
                     label: 'Unstyled',
-                    component: UnstyledDoc
+                    description: 'Theming is implemented with the pass through properties in unstyled mode.',
+                    children: [
+                        {
+                            id: 'tailwind',
+                            label: 'Tailwind',
+                            component: TailwindDoc
+                        }
+                    ]
                 }
             ]
         };
diff --git a/doc/inputmask/theming/TailwindDoc.vue b/doc/inputmask/theming/TailwindDoc.vue
new file mode 100644
index 000000000..5fc1d85e4
--- /dev/null
+++ b/doc/inputmask/theming/TailwindDoc.vue
@@ -0,0 +1,44 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
+            <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
+        </p>
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <DocSectionCode :code="code2" embedded />
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code1: {
+                basic: `
+export default {
+    inputmask: {
+        root: 'font-sans text-base text-gray-700 dark:text-white/80 bg-white dark:bg-gray-900 py-3 px-3 border border-gray-300 dark:border-blue-900/40 hover:border-blue-500 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)] transition duration-200 ease-in-out appearance-none rounded-md'
+    }
+}
+`
+            },
+            code2: {
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <InputMask id="basic" v-model="value" mask="99-999999" placeholder="99-999999" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref(null);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/inputmask/theming/UnstyledDoc.vue b/doc/inputmask/theming/UnstyledDoc.vue
deleted file mode 100644
index 4c3921d8c..000000000
--- a/doc/inputmask/theming/UnstyledDoc.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
-    </DocSectionText>
-    <DocSectionCode :code="code" embedded />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            value: '',
-            code: {
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <InputMask id="basic" v-model="value" mask="99-999999" placeholder="99-999999" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value = ref(null);
-<\/script>
-        `
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/inputmask/theming/index.vue b/doc/inputmask/theming/index.vue
index ab2517610..bdfa29b74 100644
--- a/doc/inputmask/theming/index.vue
+++ b/doc/inputmask/theming/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import StyledDoc from './StyledDoc.vue';
-import UnstyledDoc from './UnstyledDoc.vue';
+import TailwindDoc from './TailwindDoc.vue';
 
 export default {
     data() {
@@ -24,7 +24,14 @@ export default {
                 {
                     id: 'unstyled',
                     label: 'Unstyled',
-                    component: UnstyledDoc
+                    description: 'Theming is implemented with the pass through properties in unstyled mode.',
+                    children: [
+                        {
+                            id: 'tailwind',
+                            label: 'Tailwind',
+                            component: TailwindDoc
+                        }
+                    ]
                 }
             ]
         };
diff --git a/doc/inputnumber/theming/TailwindDoc.vue b/doc/inputnumber/theming/TailwindDoc.vue
new file mode 100644
index 000000000..3214c8b9e
--- /dev/null
+++ b/doc/inputnumber/theming/TailwindDoc.vue
@@ -0,0 +1,84 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
+            <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
+        </p>
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <DocSectionCode :code="code2" embedded />
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code1: {
+                basic: `
+export default {
+    inputnumber: {
+        root: 'w-full inline-flex',
+        input: ({ props }) => ({
+            class: [{ 'rounded-tr-none rounded-br-none': props.showButtons && props.buttonLayout == 'stacked' }]
+        }),
+        buttongroup: ({ props }) => ({
+            class: [{ 'flex flex-col': props.showButtons && props.buttonLayout == 'stacked' }]
+        }),
+        incrementbutton: ({ props }) => ({
+            class: [
+                'flex !items-center !justify-center',
+                {
+                    'rounded-br-none rounded-bl-none rounded-bl-none !p-0 flex-1 w-[3rem]': props.showButtons && props.buttonLayout == 'stacked'
+                }
+            ]
+        }),
+        label: 'hidden',
+        decrementbutton: ({ props }) => ({
+            class: [
+                'flex !items-center !justify-center',
+                {
+                    'rounded-tr-none rounded-tl-none rounded-tl-none !p-0 flex-1 w-[3rem]': props.showButtons && props.buttonLayout == 'stacked'
+                }
+            ]
+        })
+    }
+}
+`
+            },
+            code2: {
+                composition: `
+<template>
+    <div class="card flex flex-wrap">
+        <div class="flex-auto">
+            <label for="integeronly" class="font-bold block mb-2 text-gray-700 dark:text-white/80"> Integer Only </label>
+            <InputNumber v-model="value1" inputId="integeronly" />
+        </div>
+        <div class="flex-auto">
+            <label for="withoutgrouping" class="font-bold block mb-2 text-gray-700 dark:text-white/80"> Without Grouping </label>
+            <InputNumber v-model="value2" inputId="withoutgrouping" :useGrouping="false" />
+        </div>
+        <div class="flex-auto">
+            <label for="minmaxfraction" class="font-bold block mb-2 text-gray-700 dark:text-white/80"> Min-Max Fraction Digits </label>
+            <InputNumber v-model="value3" inputId="minmaxfraction" :minFractionDigits="2" :maxFractionDigits="5" />
+        </div>
+        <div class="flex-auto">
+            <label for="minmax" class="font-bold block mb-2 text-gray-700 dark:text-white/80"> Min-Max Boundaries </label>
+            <InputNumber v-model="value4" inputId="minmax" :min="0" :max="100" />
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const value1 = ref(42723);
+const value2 = ref(58151);
+const value3 = ref(2351.35);
+const value4 = ref(50);
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/inputnumber/theming/UnstyledDoc.vue b/doc/inputnumber/theming/UnstyledDoc.vue
deleted file mode 100644
index 170dc793e..000000000
--- a/doc/inputnumber/theming/UnstyledDoc.vue
+++ /dev/null
@@ -1,47 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
-    </DocSectionText>
-    <DocSectionCode :code="code" embedded />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                composition: `
-<template>
-    <div class="card flex flex-wrap">
-        <div class="flex-auto">
-            <label for="integeronly" class="font-bold block mb-2 text-gray-700 dark:text-white/80"> Integer Only </label>
-            <InputNumber v-model="value1" inputId="integeronly" />
-        </div>
-        <div class="flex-auto">
-            <label for="withoutgrouping" class="font-bold block mb-2 text-gray-700 dark:text-white/80"> Without Grouping </label>
-            <InputNumber v-model="value2" inputId="withoutgrouping" :useGrouping="false" />
-        </div>
-        <div class="flex-auto">
-            <label for="minmaxfraction" class="font-bold block mb-2 text-gray-700 dark:text-white/80"> Min-Max Fraction Digits </label>
-            <InputNumber v-model="value3" inputId="minmaxfraction" :minFractionDigits="2" :maxFractionDigits="5" />
-        </div>
-        <div class="flex-auto">
-            <label for="minmax" class="font-bold block mb-2 text-gray-700 dark:text-white/80"> Min-Max Boundaries </label>
-            <InputNumber v-model="value4" inputId="minmax" :min="0" :max="100" />
-        </div>
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const value1 = ref(42723);
-const value2 = ref(58151);
-const value3 = ref(2351.35);
-const value4 = ref(50);
-<\/script>`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/inputnumber/theming/index.vue b/doc/inputnumber/theming/index.vue
index c2a77914c..bacd59d97 100644
--- a/doc/inputnumber/theming/index.vue
+++ b/doc/inputnumber/theming/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import StyledDoc from './StyledDoc.vue';
-import UnstyledDoc from './UnstyledDoc.vue';
+import TailwindDoc from './TailwindDoc.vue';
 
 export default {
     data() {
@@ -24,7 +24,14 @@ export default {
                 {
                     id: 'unstyled',
                     label: 'Unstyled',
-                    component: UnstyledDoc
+                    description: 'Theming is implemented with the pass through properties in unstyled mode.',
+                    children: [
+                        {
+                            id: 'tailwind',
+                            label: 'Tailwind',
+                            component: TailwindDoc
+                        }
+                    ]
                 }
             ]
         };
diff --git a/doc/inputswitch/theming/TailwindDoc.vue b/doc/inputswitch/theming/TailwindDoc.vue
new file mode 100644
index 000000000..9b70b5a3c
--- /dev/null
+++ b/doc/inputswitch/theming/TailwindDoc.vue
@@ -0,0 +1,63 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
+            <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
+        </p>
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <DocSectionCode :code="code2" embedded />
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code1: {
+                basic: `
+export default {
+    inputswitch: {
+        root: ({ props }) => ({
+            class: [
+                'inline-block relative',
+                'w-12 h-7',
+                {
+                    'opacity-60 select-none pointer-events-none cursor-default': props.disabled
+                }
+            ]
+        }),
+        slider: ({ props }) => ({
+            class: [
+                'absolute cursor-pointer top-0 left-0 right-0 bottom-0 border border-transparent',
+                'transition-colors duration-200 rounded-2xl',
+                'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]',
+                "before:absolute before:content-'' before:top-1/2 before:bg-white before:dark:bg-gray-900 before:w-5 before:h-5 before:left-1 before:-mt-2.5 before:rounded-full before:transition-duration-200",
+                {
+                    'bg-gray-200 dark:bg-gray-800 hover:bg-gray-300 hover:dark:bg-gray-700 ': !props.modelValue,
+                    'bg-blue-500 before:transform before:translate-x-5': props.modelValue
+                }
+            ]
+        })
+    },
+}
+`
+            },
+            code2: {
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <InputSwitch v-model="checked" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const checked = ref(false);
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/inputswitch/theming/UnstyledDoc.vue b/doc/inputswitch/theming/UnstyledDoc.vue
deleted file mode 100644
index 3daac4f92..000000000
--- a/doc/inputswitch/theming/UnstyledDoc.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
-    </DocSectionText>
-    <DocSectionCode :code="code" embedded />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <InputSwitch v-model="checked" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const checked = ref(false);
-<\/script>`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/inputswitch/theming/index.vue b/doc/inputswitch/theming/index.vue
index 3e273a03b..96a7c1ae7 100644
--- a/doc/inputswitch/theming/index.vue
+++ b/doc/inputswitch/theming/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import StyledDoc from './StyledDoc.vue';
-import UnstyledDoc from './UnstyledDoc.vue';
+import TailwindDoc from './TailwindDoc.vue';
 
 export default {
     data() {
@@ -24,7 +24,14 @@ export default {
                 {
                     id: 'unstyled',
                     label: 'Unstyled',
-                    component: UnstyledDoc
+                    description: 'Theming is implemented with the pass through properties in unstyled mode.',
+                    children: [
+                        {
+                            id: 'tailwind',
+                            label: 'Tailwind',
+                            component: TailwindDoc
+                        }
+                    ]
                 }
             ]
         };
diff --git a/doc/inputtext/theming/TailwindDoc.vue b/doc/inputtext/theming/TailwindDoc.vue
new file mode 100644
index 000000000..c2e7bd88f
--- /dev/null
+++ b/doc/inputtext/theming/TailwindDoc.vue
@@ -0,0 +1,58 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
+            <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
+        </p>
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <DocSectionCode :code="code2" embedded />
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code1: {
+                basic: `
+export default {
+    inputtext: {
+        root: ({ props, context }) => ({
+            class: [
+                'm-0',
+                'font-sans text-gray-600 dark:text-white/80 bg-white dark:bg-gray-900 border border-gray-300 dark:border-blue-900/40 transition-colors duration-200 appearance-none rounded-lg',
+                {
+                    'hover:border-blue-500 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]': !context.disabled,
+                    'opacity-60 select-none pointer-events-none cursor-default': context.disabled
+                },
+                {
+                    'text-lg px-4 py-4': props.size == 'large',
+                    'text-xs px-2 py-2': props.size == 'small',
+                    'p-3 text-base': props.size == null
+                }
+            ]
+        })
+    }
+}
+`
+            },
+            code2: {
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <InputText type="text" v-model="value" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref(null);
+<\/script>
+        `
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/inputtext/theming/UnstyledDoc.vue b/doc/inputtext/theming/UnstyledDoc.vue
deleted file mode 100644
index 7c4a57de4..000000000
--- a/doc/inputtext/theming/UnstyledDoc.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
-    </DocSectionText>
-    <DocSectionCode :code="code" embedded />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <InputText type="text" v-model="value" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value = ref(null);
-<\/script>
-        `
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/inputtext/theming/index.vue b/doc/inputtext/theming/index.vue
index 2a6315b16..85073d17d 100644
--- a/doc/inputtext/theming/index.vue
+++ b/doc/inputtext/theming/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import StyledDoc from './StyledDoc.vue';
-import UnstyledDoc from './UnstyledDoc.vue';
+import TailwindDoc from './TailwindDoc.vue';
 
 export default {
     data() {
@@ -24,7 +24,14 @@ export default {
                 {
                     id: 'unstyled',
                     label: 'Unstyled',
-                    component: UnstyledDoc
+                    description: 'Theming is implemented with the pass through properties in unstyled mode.',
+                    children: [
+                        {
+                            id: 'tailwind',
+                            label: 'Tailwind',
+                            component: TailwindDoc
+                        }
+                    ]
                 }
             ]
         };
diff --git a/doc/knob/theming/TailwindDoc.vue b/doc/knob/theming/TailwindDoc.vue
new file mode 100644
index 000000000..20fa3f589
--- /dev/null
+++ b/doc/knob/theming/TailwindDoc.vue
@@ -0,0 +1,53 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
+            <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
+        </p>
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <DocSectionCode :code="code2" embedded />
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code1: {
+                basic: `
+export default {
+    knob: {
+        root: ({ props }) => ({
+            class: [
+                'focus:outline-none focus:outline-offset-0 focus:shadow-0',
+                {
+                    'opacity-60 select-none pointer-events-none cursor-default': props.disabled
+                }
+            ]
+        }),
+        range: 'stroke-current transition duration-100 ease-in stroke-gray-200 dark:stroke-gray-700 fill-none',
+        value: 'animate-dash-frame  stroke-blue-500 fill-none',
+        label: 'text-center text-xl'
+    }
+}
+`
+            },
+            code2: {
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Knob v-model="value" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref(0);
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/knob/theming/UnstyledDoc.vue b/doc/knob/theming/UnstyledDoc.vue
deleted file mode 100644
index ed63f0a41..000000000
--- a/doc/knob/theming/UnstyledDoc.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
-    </DocSectionText>
-    <DocSectionCode :code="code" embedded />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Knob v-model="value" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value = ref(0);
-<\/script>`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/knob/theming/index.vue b/doc/knob/theming/index.vue
index 18188acbf..8f5a4b9c5 100644
--- a/doc/knob/theming/index.vue
+++ b/doc/knob/theming/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import StyledDoc from './StyledDoc.vue';
-import UnstyledDoc from './UnstyledDoc.vue';
+import TailwindDoc from './TailwindDoc.vue';
 
 export default {
     data() {
@@ -24,7 +24,14 @@ export default {
                 {
                     id: 'unstyled',
                     label: 'Unstyled',
-                    component: UnstyledDoc
+                    description: 'Theming is implemented with the pass through properties in unstyled mode.',
+                    children: [
+                        {
+                            id: 'tailwind',
+                            label: 'Tailwind',
+                            component: TailwindDoc
+                        }
+                    ]
                 }
             ]
         };
diff --git a/doc/listbox/theming/TailwindDoc.vue b/doc/listbox/theming/TailwindDoc.vue
new file mode 100644
index 000000000..c88090c16
--- /dev/null
+++ b/doc/listbox/theming/TailwindDoc.vue
@@ -0,0 +1,85 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
+            <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
+        </p>
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <DocSectionCode :code="code2" embedded />
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code1: {
+                basic: `
+export default {
+    listbox: {
+        root: {
+            class: ['bg-white dark:bg-gray-900 border border-gray-400 dark:border-blue-900/40 transition-colors duration-200 ease-in-out rounded-md', 'w-full md:w-56']
+        },
+        wrapper: 'overflow-auto',
+        list: 'py-3 list-none m-0',
+        item: ({ context }) => ({
+            class: [
+                'cursor-pointer font-normal overflow-hidden relative whitespace-nowrap',
+                'm-0 p-3 border-0  transition-shadow duration-200 rounded-none',
+                'dark:text-white/80 dark:hover:bg-gray-800',
+                'hover:text-gray-700 hover:bg-gray-200',
+                {
+                    'text-gray-700': !context.focused && !context.selected,
+                    'bg-gray-300 text-gray-700 dark:text-white/80 dark:bg-gray-800/90': context.focused && !context.selected,
+                    'bg-blue-400 text-blue-700 dark:bg-blue-400 dark:text-white/80': context.focused && context.selected,
+                    'bg-blue-50 text-blue-700 dark:bg-blue-300 dark:text-white/80': !context.focused && context.selected
+                }
+            ]
+        }),
+        itemgroup: {
+            class: ['m-0 p-3 text-gray-800 bg-white font-bold', 'dark:bg-gray-900 dark:text-white/80', 'cursor-auto']
+        },
+        header: {
+            class: ['p-3 border-b border-gray-300 text-gray-700 bg-gray-100 mt-0 rounded-tl-lg rounded-tr-lg', 'dark:bg-gray-800 dark:text-white/80 dark:border-blue-900/40']
+        },
+        filtercontainer: 'relative',
+        filterinput: {
+            class: [
+                'pr-7 -mr-7',
+                'w-full',
+                'font-sans text-base text-gray-700 bg-white py-3 px-3 border border-gray-300 transition duration-200 rounded-lg appearance-none',
+                'dark:bg-gray-900 dark:border-blue-900/40 dark:hover:border-blue-300 dark:text-white/80',
+                'hover:border-blue-500 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]'
+            ]
+        },
+        filtericon: '-mt-2 absolute top-1/2'
+    }
+}
+`
+            },
+            code2: {
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Listbox v-model="selectedCity" :options="cities" optionLabel="name" class="w-full md:w-14rem" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const selectedCity = ref();
+const cities = ref([
+    { name: 'New York', code: 'NY' },
+    { name: 'Rome', code: 'RM' },
+    { name: 'London', code: 'LDN' },
+    { name: 'Istanbul', code: 'IST' },
+    { name: 'Paris', code: 'PRS' }
+]);
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/listbox/theming/UnstyledDoc.vue b/doc/listbox/theming/UnstyledDoc.vue
deleted file mode 100644
index 86b8fbff1..000000000
--- a/doc/listbox/theming/UnstyledDoc.vue
+++ /dev/null
@@ -1,36 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
-    </DocSectionText>
-    <DocSectionCode :code="code" embedded />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Listbox v-model="selectedCity" :options="cities" optionLabel="name" class="w-full md:w-14rem" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const selectedCity = ref();
-const cities = ref([
-    { name: 'New York', code: 'NY' },
-    { name: 'Rome', code: 'RM' },
-    { name: 'London', code: 'LDN' },
-    { name: 'Istanbul', code: 'IST' },
-    { name: 'Paris', code: 'PRS' }
-]);
-<\/script>`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/listbox/theming/index.vue b/doc/listbox/theming/index.vue
index 8d12b25da..d288f9043 100644
--- a/doc/listbox/theming/index.vue
+++ b/doc/listbox/theming/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import StyledDoc from './StyledDoc.vue';
-import UnstyledDoc from './UnstyledDoc.vue';
+import TailwindDoc from './TailwindDoc.vue';
 
 export default {
     data() {
@@ -24,7 +24,14 @@ export default {
                 {
                     id: 'unstyled',
                     label: 'Unstyled',
-                    component: UnstyledDoc
+                    description: 'Theming is implemented with the pass through properties in unstyled mode.',
+                    children: [
+                        {
+                            id: 'tailwind',
+                            label: 'Tailwind',
+                            component: TailwindDoc
+                        }
+                    ]
                 }
             ]
         };
diff --git a/doc/megamenu/theming/UnstyledDoc.vue b/doc/megamenu/theming/TailwindDoc.vue
similarity index 52%
rename from doc/megamenu/theming/UnstyledDoc.vue
rename to doc/megamenu/theming/TailwindDoc.vue
index 2b9c70ad0..e9cb17a83 100644
--- a/doc/megamenu/theming/UnstyledDoc.vue
+++ b/doc/megamenu/theming/TailwindDoc.vue
@@ -1,15 +1,90 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
+        <p>
+            PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
+            <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
+        </p>
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <DocSectionCode :code="code2" embedded />
     </DocSectionText>
-    <DocSectionCode :code="code" embedded />
 </template>
 
 <script>
 export default {
     data() {
         return {
-            code: {
+            code1: {
+                basic: `
+export default {
+    megamenu: {
+        root: ({ props }) => ({
+            class: ['bg-gray-100 dark:bg-gray-900  border border-gray-300 dark:border-blue-900/40  rounded-md', 'flex relative', { 'p-2 items-center': props.orientation == 'horizontal', 'flex-col w-48 p-0 py-1': props.orientation !== 'horizontal' }]
+        }),
+        menu: {
+            class: ['m-0 sm:p-0 list-none relative', 'outline-none', 'flex items-center flex-wrap flex-row top-auto left-auto relative bg-transparent shadow-none w-auto']
+        },
+        menuitem: ({ props }) => ({
+            class: [
+                'relative',
+                {
+                    'w-auto': props.horizontal,
+                    'w-full': !props.horizontal
+                }
+            ]
+        }),
+        content: ({ props, context }) => ({
+            class: [
+                'transition-shadow duration-200',
+                { 'rounded-md': props.level < 1 && props.horizontal },
+                {
+                    'text-gray-700 dark:text-white/80': !context.focused && !context.active,
+                    'bg-gray-300 text-gray-700 dark:text-white/80 dark:bg-gray-800/90': context.focused && !context.active,
+                    'bg-blue-100 text-blue-700 dark:bg-blue-400 dark:text-white/80': context.focused && context.active,
+                    'bg-blue-50 text-blue-700 dark:bg-blue-300 dark:text-white/80': !context.focused && context.active
+                },
+                {
+                    'hover:text-gray-700 dark:hover:text-white/80 hover:bg-gray-200 dark:hover:bg-gray-800/80': !context.active,
+                    'hover:bg-blue-200 dark:hover:bg-blue-500': context.active
+                }
+            ]
+        }),
+        action: {
+            class: ['select-none', 'cursor-pointer flex items-center no-underline overflow-hidden relative', 'py-3 px-5 select-none']
+        },
+        icon: {
+            class: 'mr-2'
+        },
+        submenuicon: ({ props }) => ({
+            class: [
+                {
+                    'ml-2': props.horizontal,
+                    'ml-auto': !props.horizontal
+                }
+            ]
+        }),
+        panel: ({ props }) => ({
+            class: [
+                'py-1 bg-white dark:bg-gray-900 border-0 shadow-md w-auto',
+                'absolute z-10',
+                {
+                    'left-full top-0': !props.horizontal
+                }
+            ]
+        }),
+        grid: 'flex',
+        column: 'w-1/2',
+        submenu: {
+            class: ['m-0 list-none', 'py-1 w-48']
+        },
+        submenuheader: {
+            class: ['m-0 py-3 px-5 text-gray-700 dark:text-white/80 bg-white dark:bg-gray-900 font-semibold rounded-tr-md rounded-tl-md']
+        }
+    }
+}
+`
+            },
+            code2: {
                 composition: `
 <template>
     <div class="card">
diff --git a/doc/megamenu/theming/index.vue b/doc/megamenu/theming/index.vue
index fa100ff41..43ad83d9a 100644
--- a/doc/megamenu/theming/index.vue
+++ b/doc/megamenu/theming/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import StyledDoc from './StyledDoc.vue';
-import UnstyledDoc from './UnstyledDoc.vue';
+import TailwindDoc from './TailwindDoc.vue';
 
 export default {
     data() {
@@ -24,7 +24,14 @@ export default {
                 {
                     id: 'unstyled',
                     label: 'Unstyled',
-                    component: UnstyledDoc
+                    description: 'Theming is implemented with the pass through properties in unstyled mode.',
+                    children: [
+                        {
+                            id: 'tailwind',
+                            label: 'Tailwind',
+                            component: TailwindDoc
+                        }
+                    ]
                 }
             ]
         };
diff --git a/doc/menu/theming/TailwindDoc.vue b/doc/menu/theming/TailwindDoc.vue
new file mode 100644
index 000000000..a03e3a116
--- /dev/null
+++ b/doc/menu/theming/TailwindDoc.vue
@@ -0,0 +1,83 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
+            <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
+        </p>
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <DocSectionCode :code="code2" embedded />
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code1: {
+                basic: `
+export const TRANSITIONS = {
+    toggleable: {
+        enterFromClass: 'max-h-0',
+        enterActiveClass: 'overflow-hidden transition-all duration-500 ease-in-out',
+        enterToClass: 'max-h-40	',
+        leaveFromClass: 'max-h-40',
+        leaveActiveClass: 'overflow-hidden transition-all duration-500 ease-in',
+        leaveToClass: 'max-h-0'
+    },
+    overlay: {
+        enterFromClass: 'opacity-0 scale-75',
+        enterActiveClass: 'transition-transform transition-opacity duration-150 ease-in',
+        leaveActiveClass: 'transition-opacity duration-150 ease-linear',
+        leaveToClass: 'opacity-0'
+    }
+};
+
+export default {
+    menu: {
+        root: 'py-1 bg-white dark:bg-gray-900 text-gray-700 dark:text-white/80 border border-gray-300 dark:border-blue-900/40 rounded-md w-48',
+        menu: {
+            class: ['m-0 p-0 list-none', 'outline-none']
+        },
+        content: ({ context }) => ({
+            class: [
+                'text-gray-700 dark:text-white/80 transition-shadow duration-200 rounded-none',
+                'hover:text-gray-700 dark:hover:text-white/80 hover:bg-gray-200 dark:hover:bg-gray-800/80', // Hover
+                {
+                    'bg-gray-300 text-gray-700 dark:text-white/80 dark:bg-gray-800/90': context.focused
+                }
+            ]
+        }),
+        action: {
+            class: ['text-gray-700 dark:text-white/80 py-3 px-5 select-none', 'cursor-pointer flex items-center no-underline overflow-hidden relative']
+        },
+        icon: 'text-gray-600 dark:text-white/70 mr-2',
+        submenuheader: {
+            class: ['m-0 p-3 text-gray-700 dark:text-white/80 bg-white dark:bg-gray-900 font-bold rounded-tl-none rounded-tr-none']
+        },
+        transition: TRANSITIONS.overlay
+    }
+}
+`
+            },
+            code2: {
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Menu :model="items" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const items = ref([
+    { label: 'New', icon: 'pi pi-fw pi-plus' },
+    { label: 'Delete', icon: 'pi pi-fw pi-trash' }
+]);
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/menu/theming/UnstyledDoc.vue b/doc/menu/theming/UnstyledDoc.vue
deleted file mode 100644
index ff3c33fce..000000000
--- a/doc/menu/theming/UnstyledDoc.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
-    </DocSectionText>
-    <DocSectionCode :code="code" embedded />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Menu :model="items" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const items = ref([
-    { label: 'New', icon: 'pi pi-fw pi-plus' },
-    { label: 'Delete', icon: 'pi pi-fw pi-trash' }
-]);
-<\/script>`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/menu/theming/index.vue b/doc/menu/theming/index.vue
index 01428e385..cbe38bb6d 100644
--- a/doc/menu/theming/index.vue
+++ b/doc/menu/theming/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import StyledDoc from './StyledDoc.vue';
-import UnstyledDoc from './UnstyledDoc.vue';
+import TailwindDoc from './TailwindDoc.vue';
 
 export default {
     data() {
@@ -24,7 +24,14 @@ export default {
                 {
                     id: 'unstyled',
                     label: 'Unstyled',
-                    component: UnstyledDoc
+                    description: 'Theming is implemented with the pass through properties in unstyled mode.',
+                    children: [
+                        {
+                            id: 'tailwind',
+                            label: 'Tailwind',
+                            component: TailwindDoc
+                        }
+                    ]
                 }
             ]
         };
diff --git a/doc/menubar/theming/TailwindDoc.vue b/doc/menubar/theming/TailwindDoc.vue
new file mode 100644
index 000000000..c9ba00ffd
--- /dev/null
+++ b/doc/menubar/theming/TailwindDoc.vue
@@ -0,0 +1,239 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
+            <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
+        </p>
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <DocSectionCode :code="code2" embedded />
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code1: {
+                basic: `
+export default {
+    menubar: {
+        root: {
+            class: ['p-2 bg-gray-100 dark:bg-gray-900 border border-gray-300 dark:border-blue-900/40 rounded-md', 'flex items-center relative']
+        },
+        menu: ({ props }) => ({
+            class: [
+                'm-0 sm:p-0 list-none',
+                'outline-none',
+                'sm:flex items-center flex-wrap sm:flex-row sm:top-auto sm:left-auto sm:relative sm:bg-transparent sm:shadow-none sm:w-auto',
+                'flex-col top-full left-0',
+                'absolute py-1 bg-white dark:bg-gray-900 border-0 shadow-md w-full',
+                {
+                    'hidden ': !props?.mobileActive,
+                    'flex ': props?.mobileActive
+                }
+            ]
+        }),
+        menuitem: 'sm:relative sm:w-auto w-full static',
+        content: ({ props, context }) => ({
+            class: [
+                ' transition-shadow duration-200',
+                '',
+                { 'rounded-md': props.root },
+                {
+                    'text-gray-700 dark:text-white/80': !context.focused && !context.active,
+                    'bg-gray-300 text-gray-700 dark:text-white/80 dark:bg-gray-800/90': context.focused && !context.active,
+                    'bg-blue-100 text-blue-700 dark:bg-blue-400 dark:text-white/80': context.focused && context.active,
+                    'bg-blue-50 text-blue-700 dark:bg-blue-300 dark:text-white/80': !context.focused && context.active
+                },
+                {
+                    'hover:text-gray-700 dark:hover:text-white/80 hover:bg-gray-200 dark:hover:bg-gray-800/80': !context.active,
+                    'hover:bg-blue-200 dark:hover:bg-blue-500': context.active
+                }
+            ]
+        }),
+        action: ({ context }) => ({
+            class: [
+                'select-none',
+                'cursor-pointer flex items-center no-underline overflow-hidden relative',
+                'py-3 px-5 select-none',
+                {
+                    'max-[960px]:pl-9': context.level === 1,
+                    'max-[960px]:pl-14': context.level === 2
+                }
+            ]
+        }),
+        icon: 'mr-2',
+        submenuicon: ({ props }) => ({
+            class: [
+                'max-[960px]:ml-auto',
+                {
+                    'ml-2': props.root,
+                    'ml-auto': !props.root
+                }
+            ]
+        }),
+        submenu: ({ props }) => ({
+            class: [
+                'py-1 bg-white dark:bg-gray-900 border-0  sm:shadow-md sm:w-48',
+                'w-full static shadow-none',
+                'sm:absolute z-10',
+                'm-0 list-none',
+                {
+                    'sm:absolute sm:left-full sm:top-0': props.level > 1
+                }
+            ]
+        }),
+        separator: 'border-t border-gray-300 dark:border-blue-900/40 my-1',
+        button: {
+            class: [
+                'flex sm:hidden w-8 h-8 rounded-full text-gray-600 dark:text-white/80 transition duration-200 ease-in-out',
+                'cursor-pointer flex items-center justify-center no-underline',
+                'hover:text-gray-700 dark:hover:text-white/80 hover:bg-gray-200 dark:hover:bg-gray-800/80 ',
+                'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]'
+            ]
+        }
+    }
+}
+`
+            },
+            code2: {
+                composition: `
+<template>
+    <div class="card relative z-2">
+        <Menubar :model="items" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const items = ref([
+    {
+        label: 'File',
+        icon: 'pi pi-fw pi-file',
+        items: [
+            {
+                label: 'New',
+                icon: 'pi pi-fw pi-plus',
+                items: [
+                    {
+                        label: 'Bookmark',
+                        icon: 'pi pi-fw pi-bookmark'
+                    },
+                    {
+                        label: 'Video',
+                        icon: 'pi pi-fw pi-video'
+                    }
+                ]
+            },
+            {
+                label: 'Delete',
+                icon: 'pi pi-fw pi-trash'
+            },
+            {
+                separator: true
+            },
+            {
+                label: 'Export',
+                icon: 'pi pi-fw pi-external-link'
+            }
+        ]
+    },
+    {
+        label: 'Edit',
+        icon: 'pi pi-fw pi-pencil',
+        items: [
+            {
+                label: 'Left',
+                icon: 'pi pi-fw pi-align-left'
+            },
+            {
+                label: 'Right',
+                icon: 'pi pi-fw pi-align-right'
+            },
+            {
+                label: 'Center',
+                icon: 'pi pi-fw pi-align-center'
+            },
+            {
+                label: 'Justify',
+                icon: 'pi pi-fw pi-align-justify'
+            }
+        ]
+    },
+    {
+        label: 'Users',
+        icon: 'pi pi-fw pi-user',
+        items: [
+            {
+                label: 'New',
+                icon: 'pi pi-fw pi-user-plus'
+            },
+            {
+                label: 'Delete',
+                icon: 'pi pi-fw pi-user-minus'
+            },
+            {
+                label: 'Search',
+                icon: 'pi pi-fw pi-users',
+                items: [
+                    {
+                        label: 'Filter',
+                        icon: 'pi pi-fw pi-filter',
+                        items: [
+                            {
+                                label: 'Print',
+                                icon: 'pi pi-fw pi-print'
+                            }
+                        ]
+                    },
+                    {
+                        icon: 'pi pi-fw pi-bars',
+                        label: 'List'
+                    }
+                ]
+            }
+        ]
+    },
+    {
+        label: 'Events',
+        icon: 'pi pi-fw pi-calendar',
+        items: [
+            {
+                label: 'Edit',
+                icon: 'pi pi-fw pi-pencil',
+                items: [
+                    {
+                        label: 'Save',
+                        icon: 'pi pi-fw pi-calendar-plus'
+                    },
+                    {
+                        label: 'Delete',
+                        icon: 'pi pi-fw pi-calendar-minus'
+                    }
+                ]
+            },
+            {
+                label: 'Archieve',
+                icon: 'pi pi-fw pi-calendar-times',
+                items: [
+                    {
+                        label: 'Remove',
+                        icon: 'pi pi-fw pi-calendar-minus'
+                    }
+                ]
+            }
+        ]
+    },
+    {
+        label: 'Quit',
+        icon: 'pi pi-fw pi-power-off'
+    }
+]);
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/menubar/theming/UnstyledDoc.vue b/doc/menubar/theming/UnstyledDoc.vue
deleted file mode 100644
index 25f126e63..000000000
--- a/doc/menubar/theming/UnstyledDoc.vue
+++ /dev/null
@@ -1,151 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
-    </DocSectionText>
-    <DocSectionCode :code="code" embedded />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                composition: `
-<template>
-    <div class="card relative z-2">
-        <Menubar :model="items" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const items = ref([
-    {
-        label: 'File',
-        icon: 'pi pi-fw pi-file',
-        items: [
-            {
-                label: 'New',
-                icon: 'pi pi-fw pi-plus',
-                items: [
-                    {
-                        label: 'Bookmark',
-                        icon: 'pi pi-fw pi-bookmark'
-                    },
-                    {
-                        label: 'Video',
-                        icon: 'pi pi-fw pi-video'
-                    }
-                ]
-            },
-            {
-                label: 'Delete',
-                icon: 'pi pi-fw pi-trash'
-            },
-            {
-                separator: true
-            },
-            {
-                label: 'Export',
-                icon: 'pi pi-fw pi-external-link'
-            }
-        ]
-    },
-    {
-        label: 'Edit',
-        icon: 'pi pi-fw pi-pencil',
-        items: [
-            {
-                label: 'Left',
-                icon: 'pi pi-fw pi-align-left'
-            },
-            {
-                label: 'Right',
-                icon: 'pi pi-fw pi-align-right'
-            },
-            {
-                label: 'Center',
-                icon: 'pi pi-fw pi-align-center'
-            },
-            {
-                label: 'Justify',
-                icon: 'pi pi-fw pi-align-justify'
-            }
-        ]
-    },
-    {
-        label: 'Users',
-        icon: 'pi pi-fw pi-user',
-        items: [
-            {
-                label: 'New',
-                icon: 'pi pi-fw pi-user-plus'
-            },
-            {
-                label: 'Delete',
-                icon: 'pi pi-fw pi-user-minus'
-            },
-            {
-                label: 'Search',
-                icon: 'pi pi-fw pi-users',
-                items: [
-                    {
-                        label: 'Filter',
-                        icon: 'pi pi-fw pi-filter',
-                        items: [
-                            {
-                                label: 'Print',
-                                icon: 'pi pi-fw pi-print'
-                            }
-                        ]
-                    },
-                    {
-                        icon: 'pi pi-fw pi-bars',
-                        label: 'List'
-                    }
-                ]
-            }
-        ]
-    },
-    {
-        label: 'Events',
-        icon: 'pi pi-fw pi-calendar',
-        items: [
-            {
-                label: 'Edit',
-                icon: 'pi pi-fw pi-pencil',
-                items: [
-                    {
-                        label: 'Save',
-                        icon: 'pi pi-fw pi-calendar-plus'
-                    },
-                    {
-                        label: 'Delete',
-                        icon: 'pi pi-fw pi-calendar-minus'
-                    }
-                ]
-            },
-            {
-                label: 'Archieve',
-                icon: 'pi pi-fw pi-calendar-times',
-                items: [
-                    {
-                        label: 'Remove',
-                        icon: 'pi pi-fw pi-calendar-minus'
-                    }
-                ]
-            }
-        ]
-    },
-    {
-        label: 'Quit',
-        icon: 'pi pi-fw pi-power-off'
-    }
-]);
-<\/script>`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/menubar/theming/index.vue b/doc/menubar/theming/index.vue
index 40c247d9e..ec5ea415d 100644
--- a/doc/menubar/theming/index.vue
+++ b/doc/menubar/theming/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import StyledDoc from './StyledDoc.vue';
-import UnstyledDoc from './UnstyledDoc.vue';
+import TailwindDoc from './TailwindDoc.vue';
 
 export default {
     data() {
@@ -24,7 +24,14 @@ export default {
                 {
                     id: 'unstyled',
                     label: 'Unstyled',
-                    component: UnstyledDoc
+                    description: 'Theming is implemented with the pass through properties in unstyled mode.',
+                    children: [
+                        {
+                            id: 'tailwind',
+                            label: 'Tailwind',
+                            component: TailwindDoc
+                        }
+                    ]
                 }
             ]
         };
diff --git a/doc/message/theming/TailwindDoc.vue b/doc/message/theming/TailwindDoc.vue
new file mode 100644
index 000000000..8f49a1fa8
--- /dev/null
+++ b/doc/message/theming/TailwindDoc.vue
@@ -0,0 +1,68 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
+            <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
+        </p>
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <DocSectionCode :code="code2" embedded />
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code1: {
+                basic: `
+export default {
+    message: {
+        root: ({ props }) => ({
+            class: [
+                'my-4 rounded-md',
+                {
+                    'bg-blue-100 border-solid border-0 border-l-4 border-blue-500 text-blue-700': props.severity == 'info',
+                    'bg-green-100 border-solid border-0 border-l-4 border-green-500 text-green-700': props.severity == 'success',
+                    'bg-orange-100 border-solid border-0 border-l-4 border-orange-500 text-orange-700': props.severity == 'warn',
+                    'bg-red-100 border-solid border-0 border-l-4 border-red-500 text-red-700': props.severity == 'error'
+                }
+            ]
+        }),
+        wrapper: 'flex items-center py-5 px-7',
+        icon: {
+            class: ['w-6 h-6', 'text-lg mr-2']
+        },
+        text: 'text-base font-normal',
+        button: {
+            class: ['w-8 h-8 rounded-full bg-transparent transition duration-200 ease-in-out', 'ml-auto overflow-hidden relative', 'flex items-center justify-center', 'hover:bg-white/30']
+        },
+        transition: {
+            enterFromClass: 'opacity-0',
+            enterActiveClass: 'transition-opacity duration-300',
+            leaveFromClass: 'max-h-40',
+            leaveActiveClass: 'overflow-hidden transition-all duration-300 ease-in',
+            leaveToClass: 'max-h-0 opacity-0 !m-0'
+        }
+    }
+}
+`
+            },
+            code2: {
+                composition: `
+<template>
+    <div class="card">
+        <Message severity="success">Success Message Content</Message>
+        <Message severity="info">Info Message Content</Message>
+        <Message severity="warn">Warning Message Content</Message>
+        <Message severity="error">Error Message Content</Message>
+    </div>
+</template>
+
+<script setup>
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/message/theming/UnstyledDoc.vue b/doc/message/theming/UnstyledDoc.vue
deleted file mode 100644
index 2299cdce2..000000000
--- a/doc/message/theming/UnstyledDoc.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
-    </DocSectionText>
-    <DocSectionCode :code="code" embedded />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                composition: `
-<template>
-    <div class="card">
-        <Message severity="success">Success Message Content</Message>
-        <Message severity="info">Info Message Content</Message>
-        <Message severity="warn">Warning Message Content</Message>
-        <Message severity="error">Error Message Content</Message>
-    </div>
-</template>
-
-<script setup>
-<\/script>`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/message/theming/index.vue b/doc/message/theming/index.vue
index c9eace36b..8fa561030 100644
--- a/doc/message/theming/index.vue
+++ b/doc/message/theming/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import StyledDoc from './StyledDoc.vue';
-import UnstyledDoc from './UnstyledDoc.vue';
+import TailwindDoc from './TailwindDoc.vue';
 
 export default {
     data() {
@@ -24,7 +24,14 @@ export default {
                 {
                     id: 'unstyled',
                     label: 'Unstyled',
-                    component: UnstyledDoc
+                    description: 'Theming is implemented with the pass through properties in unstyled mode.',
+                    children: [
+                        {
+                            id: 'tailwind',
+                            label: 'Tailwind',
+                            component: TailwindDoc
+                        }
+                    ]
                 }
             ]
         };
diff --git a/doc/multiselect/theming/TailwindDoc.vue b/doc/multiselect/theming/TailwindDoc.vue
new file mode 100644
index 000000000..40f0000f7
--- /dev/null
+++ b/doc/multiselect/theming/TailwindDoc.vue
@@ -0,0 +1,174 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
+            <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
+        </p>
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <DocSectionCode :code="code2" embedded />
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code1: {
+                basic: `
+export const TRANSITIONS = {
+    toggleable: {
+        enterFromClass: 'max-h-0',
+        enterActiveClass: 'overflow-hidden transition-all duration-500 ease-in-out',
+        enterToClass: 'max-h-40	',
+        leaveFromClass: 'max-h-40',
+        leaveActiveClass: 'overflow-hidden transition-all duration-500 ease-in',
+        leaveToClass: 'max-h-0'
+    },
+    overlay: {
+        enterFromClass: 'opacity-0 scale-75',
+        enterActiveClass: 'transition-transform transition-opacity duration-150 ease-in',
+        leaveActiveClass: 'transition-opacity duration-150 ease-linear',
+        leaveToClass: 'opacity-0'
+    }
+};
+
+export default {
+    multiselect: {
+        root: ({ props }) => ({
+            class: [
+                'inline-flex cursor-pointer select-none',
+                'bg-white dark:bg-gray-900 border border-gray-400 dark:border-blue-900/40  transition-colors duration-200 ease-in-out rounded-md',
+                'w-full md:w-80',
+                { 'opacity-60 select-none pointer-events-none cursor-default': props?.disabled }
+            ]
+        }),
+        labelContainer: 'overflow-hidden flex flex-auto cursor-pointer',
+        label: ({ props }) => ({
+            class: [
+                'block overflow-hidden whitespace-nowrap cursor-pointer overflow-ellipsis',
+                'text-gray-800 dark:text-white/80',
+                'p-3 transition duration-200',
+                {
+                    '!p-3': props.display !== 'chip' && (props?.modelValue == null || props?.modelValue == undefined),
+                    '!py-1.5 px-3': props.display == 'chip' && props?.modelValue !== null,
+                    '!p-3': props.display == 'chip' && props?.modelValue == null
+                }
+            ]
+        }),
+        token: {
+            class: ['py-1 px-2 mr-2 bg-gray-300 dark:bg-gray-700 text-gray-700 dark:text-white/80 rounded-full', 'cursor-default inline-flex items-center']
+        },
+        removeTokenIcon: 'ml-2',
+        trigger: {
+            class: ['flex items-center justify-center shrink-0', 'bg-transparent text-gray-600 dark:text-white/70 w-12 rounded-tr-lg rounded-br-lg']
+        },
+        panel: {
+            class: ['bg-white dark:bg-gray-900 text-gray-700 dark:text-white/80 border-0 rounded-md shadow-lg']
+        },
+        header: {
+            class: ['p-3 border-b border-gray-300 dark:border-blue-900/40 text-gray-700 dark:text-white/80 bg-gray-100 dark:bg-gray-800 rounded-t-lg', 'flex items-center justify-between']
+        },
+        headerCheckboxContainer: {
+            class: ['inline-flex cursor-pointer select-none align-bottom relative', 'mr-2', 'w-6 h-6']
+        },
+        headerCheckbox: ({ context }) => ({
+            class: [
+                'flex items-center justify-center',
+                'border-2 w-6 h-6 text-gray-600 dark:text-white/70 rounded-lg transition-colors duration-200',
+                'hover:border-blue-500 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]',
+                {
+                    'border-gray-300 dark:border-blue-900/40 bg-white dark:bg-gray-900': !context?.selected,
+                    'border-blue-500 bg-blue-500': context?.selected
+                }
+            ]
+        }),
+        headercheckboxicon: 'w-4 h-4 transition-all duration-200 text-white text-base',
+        closeButton: {
+            class: [
+                'flex items-center justify-center overflow-hidden relative',
+                'w-8 h-8 text-gray-500 dark:text-white/70 border-0 bg-transparent rounded-full transition duration-200 ease-in-out mr-2 last:mr-0',
+                'hover:text-gray-700 dark:hover:text-white/80 hover:border-transparent hover:bg-gray-200 dark:hover:bg-gray-800/80 ',
+                'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]'
+            ]
+        },
+        closeButtonIcon: 'w-4 h-4 inline-block',
+        wrapper: {
+            class: ['max-h-[200px] overflow-auto', 'bg-white text-gray-700 border-0 rounded-md shadow-lg', 'dark:bg-gray-900 dark:text-white/80']
+        },
+        list: 'py-3 list-none m-0',
+        item: ({ context }) => ({
+            class: [
+                'cursor-pointer font-normal overflow-hidden relative whitespace-nowrap',
+                'm-0 p-3 border-0  transition-shadow duration-200 rounded-none',
+                'dark:text-white/80 dark:hover:bg-gray-800',
+                'hover:text-gray-700 hover:bg-gray-200',
+                {
+                    'text-gray-700': !context.focused && !context.selected,
+                    'bg-gray-300 text-gray-700 dark:text-white/80 dark:bg-gray-800/90': context.focused && !context.selected,
+                    'bg-blue-400 text-blue-700 dark:bg-blue-400 dark:text-white/80': context.focused && context.selected,
+                    'bg-blue-50 text-blue-700 dark:bg-blue-300 dark:text-white/80': !context.focused && context.selected
+                }
+            ]
+        }),
+        checkboxContainer: {
+            class: ['inline-flex cursor-pointer select-none align-bottom relative', 'mr-2', 'w-6 h-6']
+        },
+        checkbox: ({ context }) => ({
+            class: [
+                'flex items-center justify-center',
+                'border-2 w-6 h-6 text-gray-600 dark:text-white/80 rounded-lg transition-colors duration-200',
+                'hover:border-blue-500 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]',
+                {
+                    'border-gray-300 dark:border-blue-900/40  bg-white dark:bg-gray-900': !context?.selected,
+                    'border-blue-500 bg-blue-500': context?.selected
+                }
+            ]
+        }),
+        checkboxicon: 'w-4 h-4 transition-all duration-200 text-white text-base',
+        itemgroup: {
+            class: ['m-0 p-3 text-gray-800 bg-white font-bold', 'dark:bg-gray-900 dark:text-white/80', 'cursor-auto']
+        },
+        filtercontainer: 'relative',
+        filterinput: {
+            class: [
+                'pr-7 -mr-7',
+                'w-full',
+                'font-sans text-base text-gray-700 bg-white py-3 px-3 border border-gray-300 transition duration-200 rounded-lg appearance-none',
+                'dark:bg-gray-900 dark:border-blue-900/40 dark:hover:border-blue-300 dark:text-white/80',
+                'hover:border-blue-500 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]'
+            ]
+        },
+        filtericon: '-mt-2 absolute top-1/2',
+        clearicon: 'text-gray-500 right-12 -mt-2 absolute top-1/2',
+        transition: TRANSITIONS.overlay
+    }
+}
+`
+            },
+            code2: {
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" placeholder="Select Cities"
+            :maxSelectedLabels="3" class="w-full md:w-20rem" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const selectedCities = ref();
+const cities = ref([
+    { name: 'New York', code: 'NY' },
+    { name: 'Rome', code: 'RM' },
+    { name: 'London', code: 'LDN' },
+    { name: 'Istanbul', code: 'IST' },
+    { name: 'Paris', code: 'PRS' }
+]);
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/multiselect/theming/UnstyledDoc.vue b/doc/multiselect/theming/UnstyledDoc.vue
deleted file mode 100644
index f681c29bb..000000000
--- a/doc/multiselect/theming/UnstyledDoc.vue
+++ /dev/null
@@ -1,37 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
-    </DocSectionText>
-    <DocSectionCode :code="code" embedded />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <MultiSelect v-model="selectedCities" :options="cities" optionLabel="name" placeholder="Select Cities"
-            :maxSelectedLabels="3" class="w-full md:w-20rem" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const selectedCities = ref();
-const cities = ref([
-    { name: 'New York', code: 'NY' },
-    { name: 'Rome', code: 'RM' },
-    { name: 'London', code: 'LDN' },
-    { name: 'Istanbul', code: 'IST' },
-    { name: 'Paris', code: 'PRS' }
-]);
-<\/script>`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/multiselect/theming/index.vue b/doc/multiselect/theming/index.vue
index fad2515bf..30a4f992a 100644
--- a/doc/multiselect/theming/index.vue
+++ b/doc/multiselect/theming/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import StyledDoc from './StyledDoc.vue';
-import UnstyledDoc from './UnstyledDoc.vue';
+import TailwindDoc from './TailwindDoc.vue';
 
 export default {
     data() {
@@ -24,7 +24,14 @@ export default {
                 {
                     id: 'unstyled',
                     label: 'Unstyled',
-                    component: UnstyledDoc
+                    description: 'Theming is implemented with the pass through properties in unstyled mode.',
+                    children: [
+                        {
+                            id: 'tailwind',
+                            label: 'Tailwind',
+                            component: TailwindDoc
+                        }
+                    ]
                 }
             ]
         };
diff --git a/doc/orderlist/theming/TailwindDoc.vue b/doc/orderlist/theming/TailwindDoc.vue
new file mode 100644
index 000000000..c40eaa455
--- /dev/null
+++ b/doc/orderlist/theming/TailwindDoc.vue
@@ -0,0 +1,171 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
+            <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
+        </p>
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <DocSectionCode :code="code2" :service="['ProductService']" embedded />
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code1: {
+                basic: `
+export const TRANSITIONS = {
+    toggleable: {
+        enterFromClass: 'max-h-0',
+        enterActiveClass: 'overflow-hidden transition-all duration-500 ease-in-out',
+        enterToClass: 'max-h-40	',
+        leaveFromClass: 'max-h-40',
+        leaveActiveClass: 'overflow-hidden transition-all duration-500 ease-in',
+        leaveToClass: 'max-h-0'
+    },
+    overlay: {
+        enterFromClass: 'opacity-0 scale-75',
+        enterActiveClass: 'transition-transform transition-opacity duration-150 ease-in',
+        leaveActiveClass: 'transition-opacity duration-150 ease-linear',
+        leaveToClass: 'opacity-0'
+    }
+};
+
+export default {
+    orderlist: {
+        root: 'flex',
+        controls: 'flex flex-col justify-center p-5',
+        moveupbutton: {
+            root: ({ context }) => ({
+                class: [
+                    'relative inline-flex cursor-pointer user-select-none items-center align-bottom text-center overflow-hidden m-0', // button component
+                    'text-white bg-blue-500 border border-blue-500 rounded-md',
+                    'transition duration-200 ease-in-out',
+                    'justify-center px-0 py-3', // icon only
+                    'mb-2', // orderlist button
+                    'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
+                    {
+                        'cursor-default pointer-events-none opacity-60': context.disabled
+                    }
+                ]
+            }),
+            label: 'flex-initial w-0'
+        },
+        movetopbutton: {
+            root: ({ context }) => ({
+                class: [
+                    'relative inline-flex cursor-pointer user-select-none items-center align-bottom text-center overflow-hidden m-0', // button component
+                    'text-white bg-blue-500 border border-blue-500 rounded-md',
+                    'transition duration-200 ease-in-out',
+                    'justify-center px-0 py-3', // icon only
+                    'mb-2', // orderlist button
+                    'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
+                    {
+                        'cursor-default pointer-events-none opacity-60': context.disabled
+                    }
+                ]
+            }),
+            label: 'flex-initial w-0'
+        },
+        movedownbutton: {
+            root: ({ context }) => ({
+                class: [
+                    'relative inline-flex cursor-pointer user-select-none items-center align-bottom text-center overflow-hidden m-0', // button component
+                    'text-white bg-blue-500 border border-blue-500 rounded-md',
+                    'transition duration-200 ease-in-out',
+                    'justify-center px-0 py-3', // icon only
+                    'mb-2', // orderlist button
+                    'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
+                    {
+                        'cursor-default pointer-events-none opacity-60': context.disabled
+                    }
+                ]
+            }),
+            label: 'flex-initial w-0'
+        },
+        movebottombutton: {
+            root: ({ context }) => ({
+                class: [
+                    'relative inline-flex cursor-pointer user-select-none items-center align-bottom text-center overflow-hidden m-0', // button component
+                    'text-white bg-blue-500 border border-blue-500 rounded-md',
+                    'transition duration-200 ease-in-out',
+                    'justify-center px-0 py-3', // icon only
+                    'mb-2', // orderlist button
+                    'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
+                    {
+                        'cursor-default pointer-events-none opacity-60': context.disabled
+                    }
+                ]
+            }),
+            label: 'flex-initial w-0'
+        },
+        container: 'flex-auto',
+        header: {
+            class: [
+                'bg-slate-50 text-slate-700 border border-gray-300 p-5 font-bold border-b-0 rounded-t-md',
+                'dark:bg-gray-900 dark:text-white/80 dark:border-blue-900/40' //Dark Mode
+            ]
+        },
+        list: {
+            class: [
+                'list-none m-0 p-0 overflow-auto min-h-[12rem] max-h-[24rem]',
+                'border border-gray-300 bg-white text-gray-600 py-3 px-0 rounded-b-md outline-none',
+                'dark:border-blue-900/40 dark:bg-gray-900 dark:text-white/80' //Dark Mode
+            ]
+        },
+        item: ({ context }) => ({
+            class: [
+                'relative cursor-pointer overflow-hidden',
+                'py-3 px-5 m-0 border-none text-gray-600 dark:text-white/80',
+                'transition duration-200',
+                {
+                    'text-blue-700 bg-blue-500/20 dark:bg-blue-300/20': context.active && !context.focused,
+                    'text-blue-700 bg-blue-500/30 dark:bg-blue-300/30': context.active && context.focused,
+                    'text-gray-600 bg-gray-300 dark:bg-blue-900/40': !context.active && context.focused
+                }
+            ]
+        })
+    }
+}
+`
+            },
+            code2: {
+                composition: `
+<template>
+    <div class="card xl:flex xl:justify-center">
+        <OrderList v-model="products" listStyle="height:auto" dataKey="id">
+            <template #header> List of Products </template>
+            <template #item="slotProps">
+                <div class="flex flex-wrap p-2 items-center gap-3">
+                    <img class="w-16 shadow-md shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.item.image" :alt="slotProps.item.name" />
+                    <div class="flex-1 flex flex-col gap-2">
+                        <span class="font-bold text-gray-700 dark:text-white/80">{{ slotProps.item.name }}</span>
+                        <div class="flex items-center gap-2">
+                            <i class="pi pi-tag text-sm text-gray-700 dark:text-white/80"></i>
+                            <span class="text-gray-700 dark:text-white/80">{{ slotProps.item.category }}</span>
+                        </div>
+                    </div>
+                    <span class="font-bold text-gray-700 dark:text-white/80">$ {{ slotProps.item.price }}</span>
+                </div>
+            </template>
+        </OrderList>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { ProductService } from '@/service/ProductService'
+
+const products = ref(null);
+
+onMounted(() => {
+    ProductService.getProductsSmall().then((data) => (products.value = data));
+});
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/orderlist/theming/UnstyledDoc.vue b/doc/orderlist/theming/UnstyledDoc.vue
deleted file mode 100644
index 90f5ffbad..000000000
--- a/doc/orderlist/theming/UnstyledDoc.vue
+++ /dev/null
@@ -1,49 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
-    </DocSectionText>
-    <DocSectionCode :code="code" :service="['ProductService']" embedded />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                composition: `
-<template>
-    <div class="card xl:flex xl:justify-center">
-        <OrderList v-model="products" listStyle="height:auto" dataKey="id">
-            <template #header> List of Products </template>
-            <template #item="slotProps">
-                <div class="flex flex-wrap p-2 items-center gap-3">
-                    <img class="w-16 shadow-md shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.item.image" :alt="slotProps.item.name" />
-                    <div class="flex-1 flex flex-col gap-2">
-                        <span class="font-bold text-gray-700 dark:text-white/80">{{ slotProps.item.name }}</span>
-                        <div class="flex items-center gap-2">
-                            <i class="pi pi-tag text-sm text-gray-700 dark:text-white/80"></i>
-                            <span class="text-gray-700 dark:text-white/80">{{ slotProps.item.category }}</span>
-                        </div>
-                    </div>
-                    <span class="font-bold text-gray-700 dark:text-white/80">$ {{ slotProps.item.price }}</span>
-                </div>
-            </template>
-        </OrderList>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-import { ProductService } from '@/service/ProductService'
-
-const products = ref(null);
-
-onMounted(() => {
-    ProductService.getProductsSmall().then((data) => (products.value = data));
-});
-<\/script>`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/orderlist/theming/index.vue b/doc/orderlist/theming/index.vue
index d0e0c12d3..5bd67f4fd 100644
--- a/doc/orderlist/theming/index.vue
+++ b/doc/orderlist/theming/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import StyledDoc from './StyledDoc.vue';
-import UnstyledDoc from './UnstyledDoc.vue';
+import TailwindDoc from './TailwindDoc.vue';
 
 export default {
     data() {
@@ -24,7 +24,14 @@ export default {
                 {
                     id: 'unstyled',
                     label: 'Unstyled',
-                    component: UnstyledDoc
+                    description: 'Theming is implemented with the pass through properties in unstyled mode.',
+                    children: [
+                        {
+                            id: 'tailwind',
+                            label: 'Tailwind',
+                            component: TailwindDoc
+                        }
+                    ]
                 }
             ]
         };
diff --git a/doc/organizationchart/theming/TailwindDoc.vue b/doc/organizationchart/theming/TailwindDoc.vue
new file mode 100644
index 000000000..27856b699
--- /dev/null
+++ b/doc/organizationchart/theming/TailwindDoc.vue
@@ -0,0 +1,140 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
+            <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
+        </p>
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <DocSectionCode :code="code2" embedded />
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code1: {
+                basic: `
+export default {
+    organizationchart: {
+        table: 'mx-auto my-0 border-spacing-0 border-separate',
+        cell: 'text-center align-top py-0 px-3',
+        node: {
+            class: [
+                'relative inline-block bg-white border border-gray-300 text-gray-600 p-5',
+                'dark:border-blue-900/40 dark:bg-gray-900 dark:text-white/80' // Dark Mode
+            ]
+        },
+        linecell: 'text-center align-top py-0 px-3',
+        linedown: {
+            class: [
+                'mx-auto my-0 w-px h-[20px] bg-gray-300',
+                'dark:bg-blue-900/40' //Dark Mode
+            ]
+        },
+        lineleft: ({ context }) => ({
+            class: [
+                'text-center align-top py-0 px-3 rounded-none border-r border-gray-300',
+                'dark:border-blue-900/40', //Dark Mode
+                {
+                    'border-t': context.lineTop
+                }
+            ]
+        }),
+        lineright: ({ context }) => ({
+            class: [
+                'text-center align-top py-0 px-3 rounded-none',
+                'dark:border-blue-900/40', //Dark Mode
+                {
+                    'border-t border-gray-300': context.lineTop
+                }
+            ]
+        }),
+        nodecell: 'text-center align-top py-0 px-3',
+        nodetoggler: {
+            class: [
+                'absolute bottom-[-0.75rem] left-2/4 -ml-3 w-6 h-6 bg-inherit text-inherit rounded-full z-2 cursor-pointer no-underline select-none',
+                'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]' // Focus styles
+            ]
+        },
+        nodetogglericon: 'relative inline-block w-4 h-4'
+    }
+}
+`
+            },
+            code2: {
+                composition: `
+<template>
+    <div class="card overflow-x-auto">
+        <OrganizationChart :value="data" collapsible>
+            <template #country="slotProps">
+                <div class="flex flex-col items-center">
+                    <img :alt="slotProps.node.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`w-8 shadow-md flag flag-\${slotProps.node.data}\`" />
+                    <div class="mt-3 font-medium text-lg">{{ slotProps.node.label }}</div>
+                </div>
+            </template>
+            <template #default="slotProps">
+                <span>{{slotProps.node.data.label}}</span>
+            </template>
+        </OrganizationChart>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const data = ref({
+    key: '0',
+    type: 'country',
+    label: 'Argentina',
+    data: 'ar',
+    children: [
+        {
+            key: '0_0',
+            type: 'country',
+            label: 'Argentina',
+            data: 'ar',
+            children: [
+                {
+                    key: '0_0_0',
+                    type: 'country',
+                    label: 'Argentina',
+                    data: 'ar'
+                },
+                {
+                    key: '0_0_1',
+                    type: 'country',
+                    label: 'Croatia',
+                    data: 'hr'
+                }
+            ]
+        },
+        {
+            key: '0_1',
+            type: 'country',
+            label: 'France',
+            data: 'fr',
+            children: [
+                {
+                    key: '0_1_0',
+                    type: 'country',
+                    label: 'France',
+                    data: 'fr'
+                },
+                {
+                    key: '0_1_1',
+                    type: 'country',
+                    label: 'Morocco',
+                    data: 'ma'
+                }
+            ]
+        }
+    ]
+});
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/organizationchart/theming/UnstyledDoc.vue b/doc/organizationchart/theming/UnstyledDoc.vue
deleted file mode 100644
index 855f1804a..000000000
--- a/doc/organizationchart/theming/UnstyledDoc.vue
+++ /dev/null
@@ -1,86 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
-    </DocSectionText>
-    <DocSectionCode :code="code" embedded />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                composition: `
-<template>
-    <div class="card overflow-x-auto">
-        <OrganizationChart :value="data" collapsible>
-            <template #country="slotProps">
-                <div class="flex flex-col items-center">
-                    <img :alt="slotProps.node.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`w-8 shadow-md flag flag-\${slotProps.node.data}\`" />
-                    <div class="mt-3 font-medium text-lg">{{ slotProps.node.label }}</div>
-                </div>
-            </template>
-            <template #default="slotProps">
-                <span>{{slotProps.node.data.label}}</span>
-            </template>
-        </OrganizationChart>
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const data = ref({
-    key: '0',
-    type: 'country',
-    label: 'Argentina',
-    data: 'ar',
-    children: [
-        {
-            key: '0_0',
-            type: 'country',
-            label: 'Argentina',
-            data: 'ar',
-            children: [
-                {
-                    key: '0_0_0',
-                    type: 'country',
-                    label: 'Argentina',
-                    data: 'ar'
-                },
-                {
-                    key: '0_0_1',
-                    type: 'country',
-                    label: 'Croatia',
-                    data: 'hr'
-                }
-            ]
-        },
-        {
-            key: '0_1',
-            type: 'country',
-            label: 'France',
-            data: 'fr',
-            children: [
-                {
-                    key: '0_1_0',
-                    type: 'country',
-                    label: 'France',
-                    data: 'fr'
-                },
-                {
-                    key: '0_1_1',
-                    type: 'country',
-                    label: 'Morocco',
-                    data: 'ma'
-                }
-            ]
-        }
-    ]
-});
-<\/script>`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/organizationchart/theming/index.vue b/doc/organizationchart/theming/index.vue
index 02fa383fc..863b7b3f9 100644
--- a/doc/organizationchart/theming/index.vue
+++ b/doc/organizationchart/theming/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import StyledDoc from './StyledDoc.vue';
-import UnstyledDoc from './UnstyledDoc.vue';
+import TailwindDoc from './TailwindDoc.vue';
 
 export default {
     data() {
@@ -24,7 +24,14 @@ export default {
                 {
                     id: 'unstyled',
                     label: 'Unstyled',
-                    component: UnstyledDoc
+                    description: 'Theming is implemented with the pass through properties in unstyled mode.',
+                    children: [
+                        {
+                            id: 'tailwind',
+                            label: 'Tailwind',
+                            component: TailwindDoc
+                        }
+                    ]
                 }
             ]
         };
diff --git a/doc/paginator/theming/TailwindDoc.vue b/doc/paginator/theming/TailwindDoc.vue
new file mode 100644
index 000000000..84370e393
--- /dev/null
+++ b/doc/paginator/theming/TailwindDoc.vue
@@ -0,0 +1,214 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
+            <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
+        </p>
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <DocSectionCode :code="code2" embedded />
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code1: {
+                basic: `
+export default {
+    paginator: {
+        root: {
+            class: [
+                'flex items-center justify-center flex-wrap',
+                'bg-white text-gray-500 border-0 px-4 py-2 rounded-md',
+                'dark:bg-gray-900 dark:text-white/60 dark:border-blue-900/40' // Dark Mode
+            ]
+        },
+        firstpagebutton: ({ context }) => ({
+            class: [
+                'relative inline-flex items-center justify-center user-none overflow-hidden leading-none',
+                'border-0 text-gray-500  min-w-[3rem] h-12 m-[0.143rem] rounded-md',
+                'transition duration-200',
+                'dark:text-white', //Dark Mode
+                {
+                    'cursor-default pointer-events-none opacity-60': context.disabled,
+                    'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]': !context.disabled // Focus
+                }
+            ]
+        }),
+        previouspagebutton: ({ context }) => ({
+            class: [
+                'relative inline-flex items-center justify-center user-none overflow-hidden leading-none',
+                'border-0 text-gray-500 min-w-[3rem] h-12 m-[0.143rem] rounded-md',
+                'transition duration-200',
+                'dark:text-white', //Dark Mode
+                {
+                    'cursor-default pointer-events-none opacity-60': context.disabled,
+                    'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]': !context.disabled // Focus
+                }
+            ]
+        }),
+        nextpagebutton: ({ context }) => ({
+            class: [
+                'relative inline-flex items-center justify-center user-none overflow-hidden leading-none',
+                'border-0 text-gray-500 min-w-[3rem] h-12 m-[0.143rem] rounded-md',
+                'transition duration-200',
+                'dark:text-white', //Dark Mode
+                {
+                    'cursor-default pointer-events-none opacity-60': context.disabled,
+                    'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]': !context.disabled // Focus
+                }
+            ]
+        }),
+        lastpagebutton: ({ context }) => ({
+            class: [
+                'relative inline-flex items-center justify-center user-none overflow-hidden leading-none',
+                'border-0 text-gray-500 min-w-[3rem] h-12 m-[0.143rem] rounded-md',
+                'transition duration-200',
+                'dark:text-white', //Dark Mode
+                {
+                    'cursor-default pointer-events-none opacity-60': context.disabled,
+                    'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]': !context.disabled // Focus
+                }
+            ]
+        }),
+        pagebutton: ({ context }) => ({
+            class: [
+                'relative inline-flex items-center justify-center user-none overflow-hidden leading-none',
+                'border-0 text-gray-500 min-w-[3rem] h-12 m-[0.143rem] rounded-md',
+                'transition duration-200',
+                'dark:border-blue-300 dark:text-white', // Dark Mode
+                'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]', // Focus
+                {
+                    'bg-blue-50 border-blue-50 text-blue-700 dark:bg-blue-300': context.active
+                }
+            ]
+        }),
+        rowperpagedropdown: {
+            root: ({ props, state }) => ({
+                class: [
+                    'inline-flex relative cursor-pointer user-none',
+                    'bg-white border rounded-md',
+                    'transition duration-200',
+                    'h-12 mx-2',
+                    'dark:bg-gray-950 dark:border-blue-900/40', //DarkMode
+                    {
+                        'outline-none outline-offset-0 shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] border-blue-500': state.focused && !props.disabled, //Focus
+                        'border-gray-300': !state.focused,
+                        'hover:border-blue-500': !props.disabled //Hover
+                    }
+                ]
+            }),
+            input: {
+                class: [
+                    'font-sans text-base text-gray-600 p-3 m-0 rounded-md apperance-none',
+                    'block whitespace-nowrap overflow-hidden flex-auto w-[1%] cursor-pointer text-ellipsis border-0 pr-0',
+                    'focus:outline-none focus:outline-offset-0',
+                    'dark:text-white' //Dark Mode
+                ]
+            },
+            trigger: {
+                class: ['flex items-center justify-center shrink-0', 'text-gray-500 dark:text-white w-12 rounded-r-md']
+            },
+            panel: {
+                class: [
+                    'bg-white text-gray-600 border-0 rounded-md shadow-[0_2px_12px_rgba(0,0,0,0.1)]',
+                    'dark:bg-gray-900 dark:text-white/80 dark:border-blue-900/40' //Dark Mode
+                ]
+            },
+            wrapper: 'overflow-auto',
+            list: 'm-0 p-0 py-3 list-none',
+            item: ({ context }) => ({
+                class: [
+                    'relative font-normal cursor-pointer space-nowrap overflow-hidden',
+                    'm-0 py-3 px-5 border-none text-gray-600 rounded-none',
+                    'transition duration-200',
+                    'dark:text-white/80', // Dark Mode
+                    {
+                        'text-blue-700 bg-blue-50 dark:text-white/80 dark:bg-blue-300': !context.focused && context.selected,
+                        'bg-blue-300/40': context.focused && context.selected,
+                        'text-gray-600 bg-gray-300 dark:text-white/80 dark:bg-blue-900/40': context.focused && !context.selected
+                    }
+                ]
+            })
+        },
+        jumptopageinput: {
+            root: 'inline-flex mx-2',
+            input: {
+                class: [
+                    'font-sans text-base text-gray-600 p-3 m-0 rounded-md apperance-none',
+                    'block whitespace-nowrap overflow-hidden flex-auto w-[1%] cursor-pointer text-ellipsis border border-gray-300 pr-0',
+                    'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] focus:border-blue-300',
+                    'dark:text-white dark:bg-gray-950 dark:border-blue-900/40', //Dark Mode
+                    'm-0 flex-auto max-w-[3rem]'
+                ]
+            }
+        },
+        jumptopagedropdown: {
+            root: ({ props, state }) => ({
+                class: [
+                    'inline-flex relative cursor-pointer user-none',
+                    'bg-white border rounded-md',
+                    'transition duration-200',
+                    'h-12 mx-2',
+                    'dark:bg-gray-950 dark:border-blue-900/40', //DarkMode
+                    {
+                        'outline-none outline-offset-0 shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] border-blue-500': state.focused && !props.disabled, //Focus
+                        'border-gray-300': !state.focused,
+                        'hover:border-blue-500': !props.disabled //Hover
+                    }
+                ]
+            }),
+            input: {
+                class: [
+                    'font-sans text-base text-gray-600 p-3 m-0 rounded-md apperance-none',
+                    'block whitespace-nowrap overflow-hidden flex-auto w-[1%] cursor-pointer text-ellipsis border-0 pr-0',
+                    'focus:outline-none focus:outline-offset-0',
+                    'dark:text-white' //Dark Mode
+                ]
+            },
+            trigger: {
+                class: ['flex items-center justify-center shrink-0', 'text-gray-500 dark:text-white w-12 rounded-r-md']
+            },
+            panel: {
+                class: [
+                    'bg-white text-gray-600 border-0 rounded-md shadow-[0_2px_12px_rgba(0,0,0,0.1)]',
+                    'dark:bg-gray-900 dark:text-white/80 dark:border-blue-900/40' //Dark Mode
+                ]
+            },
+            wrapper: 'overflow-auto',
+            list: 'm-0 p-0 py-3 list-none',
+            item: ({ context }) => ({
+                class: [
+                    'relative font-normal cursor-pointer space-nowrap overflow-hidden',
+                    'm-0 py-3 px-5 border-none text-gray-600 rounded-none',
+                    'transition duration-200',
+                    'dark:text-white/80', // Dark Mode
+                    {
+                        'text-blue-700 bg-blue-50 dark:text-white/80 dark:bg-blue-300': !context.focused && context.selected,
+                        'bg-blue-300/40': context.focused && context.selected,
+                        'text-gray-600 bg-gray-300 dark:text-white/80 dark:bg-blue-900/40': context.focused && !context.selected
+                    }
+                ]
+            })
+        }
+    }
+}
+`
+            },
+            code2: {
+                composition: `
+<template>
+    <div class="card">
+        <Paginator :rows="10" :totalRecords="120" :rowsPerPageOptions="[10, 20, 30]"></Paginator>
+    </div>
+</template>
+
+<script setup>
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/paginator/theming/UnstyledDoc.vue b/doc/paginator/theming/UnstyledDoc.vue
deleted file mode 100644
index 0902a0df4..000000000
--- a/doc/paginator/theming/UnstyledDoc.vue
+++ /dev/null
@@ -1,26 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
-    </DocSectionText>
-    <DocSectionCode :code="code" embedded />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                composition: `
-<template>
-    <div class="card">
-        <Paginator :rows="10" :totalRecords="120" :rowsPerPageOptions="[10, 20, 30]"></Paginator>
-    </div>
-</template>
-
-<script setup>
-<\/script>`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/paginator/theming/index.vue b/doc/paginator/theming/index.vue
index 970950eca..8109f7c4c 100644
--- a/doc/paginator/theming/index.vue
+++ b/doc/paginator/theming/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import StyledDoc from './StyledDoc.vue';
-import UnstyledDoc from './UnstyledDoc.vue';
+import TailwindDoc from './TailwindDoc.vue';
 
 export default {
     data() {
@@ -24,7 +24,14 @@ export default {
                 {
                     id: 'unstyled',
                     label: 'Unstyled',
-                    component: UnstyledDoc
+                    description: 'Theming is implemented with the pass through properties in unstyled mode.',
+                    children: [
+                        {
+                            id: 'tailwind',
+                            label: 'Tailwind',
+                            component: TailwindDoc
+                        }
+                    ]
                 }
             ]
         };
diff --git a/doc/panelmenu/theming/UnstyledDoc.vue b/doc/panelmenu/theming/TailwindDoc.vue
similarity index 51%
rename from doc/panelmenu/theming/UnstyledDoc.vue
rename to doc/panelmenu/theming/TailwindDoc.vue
index 171f4804a..8e21697a9 100644
--- a/doc/panelmenu/theming/UnstyledDoc.vue
+++ b/doc/panelmenu/theming/TailwindDoc.vue
@@ -1,15 +1,83 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
+        <p>
+            PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
+            <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
+        </p>
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <DocSectionCode :code="code2" embedded />
     </DocSectionText>
-    <DocSectionCode :code="code" embedded />
 </template>
 
 <script>
 export default {
     data() {
         return {
-            code: {
+            code1: {
+                basic: `
+export const TRANSITIONS = {
+    toggleable: {
+        enterFromClass: 'max-h-0',
+        enterActiveClass: 'overflow-hidden transition-all duration-500 ease-in-out',
+        enterToClass: 'max-h-40	',
+        leaveFromClass: 'max-h-40',
+        leaveActiveClass: 'overflow-hidden transition-all duration-500 ease-in',
+        leaveToClass: 'max-h-0'
+    },
+    overlay: {
+        enterFromClass: 'opacity-0 scale-75',
+        enterActiveClass: 'transition-transform transition-opacity duration-150 ease-in',
+        leaveActiveClass: 'transition-opacity duration-150 ease-linear',
+        leaveToClass: 'opacity-0'
+    }
+};
+
+export default {
+    panelmenu: {
+        root: 'w-full md:w-[25rem]',
+        panel: 'mb-1',
+        header: {
+            class: [
+                'outline-none',
+                'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]' // Focus
+            ]
+        },
+        headercontent: {
+            class: [
+                'border border-solid border-gray-300 dark:border-blue-900/40 text-gray-700 dark:text-white/80 bg-gray-100 dark:bg-gray-900 rounded-md transition-shadow duration-200',
+                'hover:bg-gray-200 dark:hover:bg-gray-800/80  hover:text-gray-700 dark:hover:text-white/80'
+            ]
+        },
+        headeraction: {
+            class: ['flex items-center select-none cursor-pointer relative no-underline', 'text-gray-700 dark:text-white/80 p-5 font-bold']
+        },
+        submenuicon: 'mr-2',
+        headericon: 'mr-2',
+        menucontent: 'py-1 border border-t-0 border-gray-300 dark:border-blue-900/40 bg-white dark:bg-gray-900 text-gray-700 dark:text-white/80 rounded-t-none rounded-br-md rounded-bl-md',
+        menu: {
+            class: ['outline-none', 'm-0 p-0 list-none']
+        },
+        content: ({ context }) => ({
+            class: [
+                'text-gray-700 dark:text-white/80 transition-shadow duration-200 border-none rounded-none',
+                'hover:bg-gray-200 dark:hover:bg-gray-800/80  hover:text-gray-700 dark:hover:text-white/80', // Hover
+                {
+                    'bg-gray-300 text-gray-700 dark:text-white/80 dark:bg-gray-800/90': context.focused
+                }
+            ]
+        }),
+        action: {
+            class: ['text-gray-700 dark:text-white/80 py-3 px-5 select-none', 'flex items-center cursor-pointer no-underline relative overflow-hidden']
+        },
+        icon: 'mr-2',
+        submenu: 'p-0 pl-4 m-0 list-none',
+        transition: TRANSITIONS.toggleable
+    }
+}
+`
+            },
+            code2: {
                 composition: `
 <template>
     <div class="card flex justify-center">
diff --git a/doc/panelmenu/theming/index.vue b/doc/panelmenu/theming/index.vue
index ee4c4d6e1..854bde583 100644
--- a/doc/panelmenu/theming/index.vue
+++ b/doc/panelmenu/theming/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import StyledDoc from './StyledDoc.vue';
-import UnstyledDoc from './UnstyledDoc.vue';
+import TailwindDoc from './TailwindDoc.vue';
 
 export default {
     data() {
@@ -24,7 +24,14 @@ export default {
                 {
                     id: 'unstyled',
                     label: 'Unstyled',
-                    component: UnstyledDoc
+                    description: 'Theming is implemented with the pass through properties in unstyled mode.',
+                    children: [
+                        {
+                            id: 'tailwind',
+                            label: 'Tailwind',
+                            component: TailwindDoc
+                        }
+                    ]
                 }
             ]
         };
diff --git a/doc/password/theming/TailwindDoc.vue b/doc/password/theming/TailwindDoc.vue
new file mode 100644
index 000000000..41dc03670
--- /dev/null
+++ b/doc/password/theming/TailwindDoc.vue
@@ -0,0 +1,87 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
+            <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
+        </p>
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <DocSectionCode :code="code2" embedded />
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code1: {
+                basic: `
+export const TRANSITIONS = {
+    toggleable: {
+        enterFromClass: 'max-h-0',
+        enterActiveClass: 'overflow-hidden transition-all duration-500 ease-in-out',
+        enterToClass: 'max-h-40	',
+        leaveFromClass: 'max-h-40',
+        leaveActiveClass: 'overflow-hidden transition-all duration-500 ease-in',
+        leaveToClass: 'max-h-0'
+    },
+    overlay: {
+        enterFromClass: 'opacity-0 scale-75',
+        enterActiveClass: 'transition-transform transition-opacity duration-150 ease-in',
+        leaveActiveClass: 'transition-opacity duration-150 ease-linear',
+        leaveToClass: 'opacity-0'
+    }
+};
+
+export default {
+    password: {
+        root: ({ props }) => ({
+            class: [
+                'inline-flex relative',
+                {
+                    'opacity-60 select-none pointer-events-none cursor-default': props.disabled
+                }
+            ]
+        }),
+        panel: 'p-5 bg-white dark:bg-gray-900 text-gray-700 dark:text-white/80 shadow-md rounded-md',
+        meter: 'mb-2 bg-gray-300 dark:bg-gray-700 h-3',
+        meterlabel: ({ instance, props }) => ({
+            class: [
+                'transition-width duration-1000 ease-in-out h-full',
+                {
+                    'bg-red-500': instance?.meter?.strength == 'weak',
+                    'bg-orange-500': instance?.meter?.strength == 'medium',
+                    'bg-green-500': instance?.meter?.strength == 'strong'
+                },
+                { 'pr-[2.5rem] ': props.toggleMask }
+            ]
+        }),
+        showicon: {
+            class: ['absolute top-1/2 -mt-2', 'right-3 text-gray-600 dark:text-white/70']
+        },
+        hideicon: {
+            class: ['absolute top-1/2 -mt-2', 'right-3 text-gray-600 dark:text-white/70']
+        },
+        transition: TRANSITIONS.overlay
+    }
+}
+`
+            },
+            code2: {
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Password v-model="value" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref(null);
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/password/theming/UnstyledDoc.vue b/doc/password/theming/UnstyledDoc.vue
deleted file mode 100644
index c8b8513c5..000000000
--- a/doc/password/theming/UnstyledDoc.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
-    </DocSectionText>
-    <DocSectionCode :code="code" embedded />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Password v-model="value" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value = ref(null);
-<\/script>`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/password/theming/index.vue b/doc/password/theming/index.vue
index 53bc230be..d21730ce5 100644
--- a/doc/password/theming/index.vue
+++ b/doc/password/theming/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import StyledDoc from './StyledDoc.vue';
-import UnstyledDoc from './UnstyledDoc.vue';
+import TailwindDoc from './TailwindDoc.vue';
 
 export default {
     data() {
@@ -24,7 +24,14 @@ export default {
                 {
                     id: 'unstyled',
                     label: 'Unstyled',
-                    component: UnstyledDoc
+                    description: 'Theming is implemented with the pass through properties in unstyled mode.',
+                    children: [
+                        {
+                            id: 'tailwind',
+                            label: 'Tailwind',
+                            component: TailwindDoc
+                        }
+                    ]
                 }
             ]
         };
diff --git a/doc/picklist/theming/TailwindDoc.vue b/doc/picklist/theming/TailwindDoc.vue
new file mode 100644
index 000000000..2e05b07d4
--- /dev/null
+++ b/doc/picklist/theming/TailwindDoc.vue
@@ -0,0 +1,305 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
+            <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
+        </p>
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <DocSectionCode :code="code2" :service="['ProductService']" embedded />
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code1: {
+                basic: `
+export default {
+    picklist: {
+        root: 'flex',
+        sourcecontrols: 'flex flex-col justify-center p-5',
+        sourcemoveupbutton: {
+            root: ({ context }) => ({
+                class: [
+                    'relative inline-flex cursor-pointer user-select-none items-center align-bottom text-center overflow-hidden m-0', // button component
+                    'text-white bg-blue-500 border border-blue-500 rounded-md',
+                    'transition duration-200 ease-in-out',
+                    'justify-center px-0 py-3', // icon only
+                    'mb-2', // orderlist button
+                    'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
+                    {
+                        'cursor-default pointer-events-none opacity-60': context.disabled
+                    }
+                ]
+            }),
+            label: 'flex-initial w-0'
+        },
+        sourcemovetopbutton: {
+            root: ({ context }) => ({
+                class: [
+                    'relative inline-flex cursor-pointer user-select-none items-center align-bottom text-center overflow-hidden m-0', // button component
+                    'text-white bg-blue-500 border border-blue-500 rounded-md',
+                    'transition duration-200 ease-in-out',
+                    'justify-center px-0 py-3', // icon only
+                    'mb-2', // orderlist button
+                    'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
+                    {
+                        'cursor-default pointer-events-none opacity-60': context.disabled
+                    }
+                ]
+            }),
+            label: 'flex-initial w-0'
+        },
+        sourcemovedownbutton: {
+            root: ({ context }) => ({
+                class: [
+                    'relative inline-flex cursor-pointer user-select-none items-center align-bottom text-center overflow-hidden m-0', // button component
+                    'text-white bg-blue-500 border border-blue-500 rounded-md',
+                    'transition duration-200 ease-in-out',
+                    'justify-center px-0 py-3', // icon only
+                    'mb-2', // orderlist button
+                    'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
+                    {
+                        'cursor-default pointer-events-none opacity-60': context.disabled
+                    }
+                ]
+            }),
+            label: 'flex-initial w-0'
+        },
+        sourcemovebottombutton: {
+            root: ({ context }) => ({
+                class: [
+                    'relative inline-flex cursor-pointer user-select-none items-center align-bottom text-center overflow-hidden m-0', // button component
+                    'text-white bg-blue-500 border border-blue-500 rounded-md',
+                    'transition duration-200 ease-in-out',
+                    'justify-center px-0 py-3', // icon only
+                    'mb-2', // orderlist button
+                    'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
+                    {
+                        'cursor-default pointer-events-none opacity-60': context.disabled
+                    }
+                ]
+            }),
+            label: 'flex-initial w-0'
+        },
+        sourcewrapper: 'grow shrink basis-2/4',
+        sourceheader: {
+            class: [
+                'bg-slate-50 text-slate-700 border border-gray-300 p-5 font-bold border-b-0 rounded-t-md',
+                'dark:bg-gray-900 dark:text-white/80 dark:border-blue-900/40' //Dark Mode
+            ]
+        },
+        sourcelist: {
+            class: [
+                'list-none m-0 p-0 overflow-auto min-h-[12rem] max-h-[24rem]',
+                'border border-gray-300 bg-white text-gray-600 py-3 px-0 rounded-b-md outline-none',
+                'dark:border-blue-900/40 dark:bg-gray-900 dark:text-white/80' //Dark Mode
+            ]
+        },
+        item: ({ context }) => ({
+            class: [
+                'relative cursor-pointer overflow-hidden',
+                'py-3 px-5 m-0 border-none text-gray-600 dark:text-white/80',
+                'transition duration-200',
+                {
+                    'text-blue-700 bg-blue-500/20 dark:bg-blue-300/20': context.active && !context.focused,
+                    'text-blue-700 bg-blue-500/30 dark:bg-blue-300/30': context.active && context.focused,
+                    'text-gray-600 bg-gray-300 dark:bg-blue-900/40': !context.active && context.focused
+                }
+            ]
+        }),
+        buttons: 'flex flex-col justify-center p-5',
+        movetotargetbutton: {
+            root: ({ context }) => ({
+                class: [
+                    'relative inline-flex cursor-pointer user-select-none items-center align-bottom text-center overflow-hidden m-0', // button component
+                    'text-white bg-blue-500 border border-blue-500 rounded-md',
+                    'transition duration-200 ease-in-out',
+                    'justify-center px-0 py-3', // icon only
+                    'mb-2', // orderlist button
+                    'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
+                    {
+                        'cursor-default pointer-events-none opacity-60': context.disabled
+                    }
+                ]
+            }),
+            label: 'flex-initial w-0'
+        },
+        movealltotargetbutton: {
+            root: ({ context }) => ({
+                class: [
+                    'relative inline-flex cursor-pointer user-select-none items-center align-bottom text-center overflow-hidden m-0', // button component
+                    'text-white bg-blue-500 border border-blue-500 rounded-md',
+                    'transition duration-200 ease-in-out',
+                    'justify-center px-0 py-3', // icon only
+                    'mb-2', // orderlist button
+                    'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
+                    {
+                        'cursor-default pointer-events-none opacity-60': context.disabled
+                    }
+                ]
+            }),
+            label: 'flex-initial w-0'
+        },
+        movetosourcebutton: {
+            root: ({ context }) => ({
+                class: [
+                    'relative inline-flex cursor-pointer user-select-none items-center align-bottom text-center overflow-hidden m-0', // button component
+                    'text-white bg-blue-500 border border-blue-500 rounded-md',
+                    'transition duration-200 ease-in-out',
+                    'justify-center px-0 py-3', // icon only
+                    'mb-2', // orderlist button
+                    'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
+                    {
+                        'cursor-default pointer-events-none opacity-60': context.disabled
+                    }
+                ]
+            }),
+            label: 'flex-initial w-0'
+        },
+        movealltosourcebutton: {
+            root: ({ context }) => ({
+                class: [
+                    'relative inline-flex cursor-pointer user-select-none items-center align-bottom text-center overflow-hidden m-0', // button component
+                    'text-white bg-blue-500 border border-blue-500 rounded-md',
+                    'transition duration-200 ease-in-out',
+                    'justify-center px-0 py-3', // icon only
+                    'mb-2', // orderlist button
+                    'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
+                    {
+                        'cursor-default pointer-events-none opacity-60': context.disabled
+                    }
+                ]
+            }),
+            label: 'flex-initial w-0'
+        },
+        targetcontrols: 'flex flex-col justify-center p-5',
+        targetmoveupbutton: {
+            root: ({ context }) => ({
+                class: [
+                    'relative inline-flex cursor-pointer user-select-none items-center align-bottom text-center overflow-hidden m-0', // button component
+                    'text-white bg-blue-500 border border-blue-500 rounded-md',
+                    'transition duration-200 ease-in-out',
+                    'justify-center px-0 py-3', // icon only
+                    'mb-2', // orderlist button
+                    'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
+                    {
+                        'cursor-default pointer-events-none opacity-60': context.disabled
+                    }
+                ]
+            }),
+            label: 'flex-initial w-0'
+        },
+        targetmovetopbutton: {
+            root: ({ context }) => ({
+                class: [
+                    'relative inline-flex cursor-pointer user-select-none items-center align-bottom text-center overflow-hidden m-0', // button component
+                    'text-white bg-blue-500 border border-blue-500 rounded-md',
+                    'transition duration-200 ease-in-out',
+                    'justify-center px-0 py-3', // icon only
+                    'mb-2', // orderlist button
+                    'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
+                    {
+                        'cursor-default pointer-events-none opacity-60': context.disabled
+                    }
+                ]
+            }),
+            label: 'flex-initial w-0'
+        },
+        targetmovedownbutton: {
+            root: ({ context }) => ({
+                class: [
+                    'relative inline-flex cursor-pointer user-select-none items-center align-bottom text-center overflow-hidden m-0', // button component
+                    'text-white bg-blue-500 border border-blue-500 rounded-md',
+                    'transition duration-200 ease-in-out',
+                    'justify-center px-0 py-3', // icon only
+                    'mb-2', // orderlist button
+                    'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
+                    {
+                        'cursor-default pointer-events-none opacity-60': context.disabled
+                    }
+                ]
+            }),
+            label: 'flex-initial w-0'
+        },
+        targetmovebottombutton: {
+            root: ({ context }) => ({
+                class: [
+                    'relative inline-flex cursor-pointer user-select-none items-center align-bottom text-center overflow-hidden m-0', // button component
+                    'text-white bg-blue-500 border border-blue-500 rounded-md',
+                    'transition duration-200 ease-in-out',
+                    'justify-center px-0 py-3', // icon only
+                    'mb-2', // orderlist button
+                    'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900', //Dark Mode
+                    {
+                        'cursor-default pointer-events-none opacity-60': context.disabled
+                    }
+                ]
+            }),
+            label: 'flex-initial w-0'
+        },
+        targetwrapper: 'grow shrink basis-2/4',
+        targetheader: {
+            class: [
+                'bg-slate-50 text-slate-700 border border-gray-300 p-5 font-bold border-b-0 rounded-t-md',
+                'dark:bg-gray-900 dark:text-white/80 dark:border-blue-900/40' //Dark Mode
+            ]
+        },
+        targetlist: {
+            class: [
+                'list-none m-0 p-0 overflow-auto min-h-[12rem] max-h-[24rem]',
+                'border border-gray-300 bg-white text-gray-600 py-3 px-0 rounded-b-md outline-none',
+                'dark:border-blue-900/40 dark:bg-gray-900 dark:text-white/80' //Dark Mode
+            ]
+        },
+        transition: {
+            enterFromClass: '!transition-none',
+            enterActiveClass: '!transition-none',
+            leaveActiveClass: '!transition-none',
+            leaveToClass: '!transition-none'
+        }
+    }
+}
+`
+            },
+            code2: {
+                composition: `
+<template>
+    <div class="card">
+        <PickList v-model="products" listStyle="height:342px" dataKey="id">
+            <template #sourceheader> Available </template>
+            <template #targetheader> Selected </template>
+            <template #item="slotProps">
+                <div class="flex flex-wrap p-2 items-center gap-3">
+                    <img class="w-16 shadow-md shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.item.image" :alt="slotProps.item.name" />
+                    <div class="flex-1 flex flex-col gap-2">
+                        <span class="font-bold text-gray-700 dark:text-white/80">{{ slotProps.item.name }}</span>
+                        <div class="flex items-center gap-2">
+                            <i class="pi pi-tag text-sm text-gray-700 dark:text-white/80"></i>
+                            <span class="text-gray-700 dark:text-white/80">{{ slotProps.item.category }}</span>
+                        </div>
+                    </div>
+                    <span class="font-bold text-gray-700 dark:text-white/80">$ {{ slotProps.item.price }}</span>
+                </div>
+            </template>
+        </PickList>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { ProductService } from '@/service/ProductService'
+
+const products = ref(null);
+
+onMounted(() => {
+    ProductService.getProductsSmall().then((data) => (products.value = [data, []]));
+});
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/picklist/theming/UnstyledDoc.vue b/doc/picklist/theming/UnstyledDoc.vue
deleted file mode 100644
index bc9a36f8f..000000000
--- a/doc/picklist/theming/UnstyledDoc.vue
+++ /dev/null
@@ -1,66 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
-    </DocSectionText>
-    <DocSectionCode :code="code" :service="['ProductService']" embedded />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                composition: `
-<template>
-    <div class="card">
-        <PickList v-model="products" listStyle="height:342px" dataKey="id">
-            <template #sourceheader> Available </template>
-            <template #targetheader> Selected </template>
-            <template #item="slotProps">
-                <div class="flex flex-wrap p-2 items-center gap-3">
-                    <img class="w-16 shadow-md shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.item.image" :alt="slotProps.item.name" />
-                    <div class="flex-1 flex flex-col gap-2">
-                        <span class="font-bold text-gray-700 dark:text-white/80">{{ slotProps.item.name }}</span>
-                        <div class="flex items-center gap-2">
-                            <i class="pi pi-tag text-sm text-gray-700 dark:text-white/80"></i>
-                            <span class="text-gray-700 dark:text-white/80">{{ slotProps.item.category }}</span>
-                        </div>
-                    </div>
-                    <span class="font-bold text-gray-700 dark:text-white/80">$ {{ slotProps.item.price }}</span>
-                </div>
-            </template>
-        </PickList>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-import { ProductService } from '@/service/ProductService'
-
-const products = ref(null);
-
-onMounted(() => {
-    ProductService.getProductsSmall().then((data) => (products.value = [data, []]));
-});
-<\/script>`,
-                data: `
-/* ProductService */
-{
-    id: '1000',
-    code: 'f230fh0g3',
-    name: 'Bamboo Watch',
-    description: 'Product Description',
-    image: '/bamboo-watch.jpg',
-    price: 65,
-    category: 'Accessories',
-    quantity: 24,
-    inventoryStatus: 'INSTOCK',
-    rating: 5
-},
-...
-        `
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/picklist/theming/index.vue b/doc/picklist/theming/index.vue
index 76e634c67..0bc3a4d56 100644
--- a/doc/picklist/theming/index.vue
+++ b/doc/picklist/theming/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import StyledDoc from './StyledDoc.vue';
-import UnstyledDoc from './UnstyledDoc.vue';
+import TailwindDoc from './TailwindDoc.vue';
 
 export default {
     data() {
@@ -24,7 +24,14 @@ export default {
                 {
                     id: 'unstyled',
                     label: 'Unstyled',
-                    component: UnstyledDoc
+                    description: 'Theming is implemented with the pass through properties in unstyled mode.',
+                    children: [
+                        {
+                            id: 'tailwind',
+                            label: 'Tailwind',
+                            component: TailwindDoc
+                        }
+                    ]
                 }
             ]
         };
diff --git a/doc/radiobutton/theming/TailwindDoc.vue b/doc/radiobutton/theming/TailwindDoc.vue
new file mode 100644
index 000000000..ccc2d4c78
--- /dev/null
+++ b/doc/radiobutton/theming/TailwindDoc.vue
@@ -0,0 +1,86 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
+            <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
+        </p>
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <DocSectionCode :code="code2" embedded />
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code1: {
+                basic: `
+export default {
+    radiobutton: {
+        root: {
+            class: ['relative inline-flex cursor-pointer select-none align-bottom', 'w-6 h-6']
+        },
+        input: ({ props }) => ({
+            class: [
+                'flex justify-center items-center',
+                'border-2 w-6 h-6 text-gray-700 rounded-full transition duration-200 ease-in-out',
+                {
+                    'border-gray-300 bg-white dark:border-blue-900/40 dark:bg-gray-900 dark:text-white/80': props.value !== props.modelValue,
+                    'border-blue-500 bg-blue-500 dark:border-blue-400 dark:bg-blue-400': props.value == props.modelValue
+                },
+                {
+                    'hover:border-blue-500 dark:hover:border-blue-400 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]': !props.disabled,
+                    'cursor-default opacity-60': props.disabled
+                }
+            ]
+        }),
+        icon: ({ props }) => ({
+            class: [
+                'transform rounded-full',
+                'block w-3 h-3 transition duration-200 bg-white dark:bg-gray-900',
+                {
+                    'backface-hidden scale-10 invisible': props.value !== props.modelValue,
+                    'transform scale-100 visible': props.value == props.modelValue
+                }
+            ]
+        })
+    }
+}
+`
+            },
+            code2: {
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <div class="flex flex-wrap gap-3">
+            <div class="flex align-items-center">
+                <RadioButton v-model="ingredient" inputId="ingredient1" name="pizza" value="Cheese" />
+                <label for="ingredient1" class="text-gray-700 dark:text-white/80 ml-2">Cheese</label>
+            </div>
+            <div class="flex align-items-center">
+                <RadioButton v-model="ingredient" inputId="ingredient2" name="pizza" value="Mushroom" />
+                <label for="ingredient2" class="text-gray-700 dark:text-white/80 ml-2">Mushroom</label>
+            </div>
+            <div class="flex align-items-center">
+                <RadioButton v-model="ingredient" inputId="ingredient3" name="pizza" value="Pepper" />
+                <label for="ingredient3" class="text-gray-700 dark:text-white/80 ml-2">Pepper</label>
+            </div>
+            <div class="flex align-items-center">
+                <RadioButton v-model="ingredient" inputId="ingredient4" name="pizza" value="Onion" />
+                <label for="ingredient4" class="text-gray-700 dark:text-white/80 ml-2">Onion</label>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const ingredient = ref('');
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/radiobutton/theming/UnstyledDoc.vue b/doc/radiobutton/theming/UnstyledDoc.vue
deleted file mode 100644
index 928cb7b28..000000000
--- a/doc/radiobutton/theming/UnstyledDoc.vue
+++ /dev/null
@@ -1,46 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
-    </DocSectionText>
-    <DocSectionCode :code="code" embedded />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <div class="flex flex-wrap gap-3">
-            <div class="flex align-items-center">
-                <RadioButton v-model="ingredient" inputId="ingredient1" name="pizza" value="Cheese" />
-                <label for="ingredient1" class="text-gray-700 dark:text-white/80 ml-2">Cheese</label>
-            </div>
-            <div class="flex align-items-center">
-                <RadioButton v-model="ingredient" inputId="ingredient2" name="pizza" value="Mushroom" />
-                <label for="ingredient2" class="text-gray-700 dark:text-white/80 ml-2">Mushroom</label>
-            </div>
-            <div class="flex align-items-center">
-                <RadioButton v-model="ingredient" inputId="ingredient3" name="pizza" value="Pepper" />
-                <label for="ingredient3" class="text-gray-700 dark:text-white/80 ml-2">Pepper</label>
-            </div>
-            <div class="flex align-items-center">
-                <RadioButton v-model="ingredient" inputId="ingredient4" name="pizza" value="Onion" />
-                <label for="ingredient4" class="text-gray-700 dark:text-white/80 ml-2">Onion</label>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const ingredient = ref('');
-<\/script>`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/radiobutton/theming/index.vue b/doc/radiobutton/theming/index.vue
index a8a1a2dc4..f906fb22c 100644
--- a/doc/radiobutton/theming/index.vue
+++ b/doc/radiobutton/theming/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import StyledDoc from './StyledDoc.vue';
-import UnstyledDoc from './UnstyledDoc.vue';
+import TailwindDoc from './TailwindDoc.vue';
 
 export default {
     data() {
@@ -24,7 +24,14 @@ export default {
                 {
                     id: 'unstyled',
                     label: 'Unstyled',
-                    component: UnstyledDoc
+                    description: 'Theming is implemented with the pass through properties in unstyled mode.',
+                    children: [
+                        {
+                            id: 'tailwind',
+                            label: 'Tailwind',
+                            component: TailwindDoc
+                        }
+                    ]
                 }
             ]
         };
diff --git a/doc/rating/theming/TailwindDoc.vue b/doc/rating/theming/TailwindDoc.vue
new file mode 100644
index 000000000..001b158e1
--- /dev/null
+++ b/doc/rating/theming/TailwindDoc.vue
@@ -0,0 +1,80 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
+            <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
+        </p>
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <DocSectionCode :code="code2" embedded />
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code1: {
+                basic: `
+export default {
+    rating: {
+        root: ({ props }) => ({
+            class: [
+                'relative flex items-center',
+                'gap-2',
+                {
+                    'opacity-60 select-none pointer-events-none cursor-default': props.disabled
+                }
+            ]
+        }),
+        cancelitem: ({ context }) => ({
+            class: [
+                'inline-flex items-center cursor-pointer',
+                {
+                    'outline-none outline-offset-0 shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]': context.focused
+                }
+            ]
+        }),
+        cancelicon: {
+            class: ['text-red-500', 'w-5 h-5', 'transition duration-200 ease-in']
+        },
+        item: ({ props, context }) => ({
+            class: [
+                'inline-flex items-center',
+                {
+                    'cursor-pointer': !props.readonly,
+                    'cursor-default': props.readonly
+                },
+                {
+                    'outline-none outline-offset-0 shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]': context.focused
+                }
+            ]
+        }),
+        officon: {
+            class: ['text-gray-700 hover:text-blue-400', 'w-5 h-5', 'transition duration-200 ease-in']
+        },
+        onicon: {
+            class: ['text-blue-500', 'w-5 h-5', 'transition duration-200 ease-in']
+        }
+    },
+}
+`
+            },
+            code2: {
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Rating v-model="value" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref(null);
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/rating/theming/UnstyledDoc.vue b/doc/rating/theming/UnstyledDoc.vue
deleted file mode 100644
index 2b1655b57..000000000
--- a/doc/rating/theming/UnstyledDoc.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
-    </DocSectionText>
-    <DocSectionCode :code="code" embedded />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Rating v-model="value" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value = ref(null);
-<\/script>`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/rating/theming/index.vue b/doc/rating/theming/index.vue
index bb127c40b..ca19b3a89 100644
--- a/doc/rating/theming/index.vue
+++ b/doc/rating/theming/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import StyledDoc from './StyledDoc.vue';
-import UnstyledDoc from './UnstyledDoc.vue';
+import TailwindDoc from './TailwindDoc.vue';
 
 export default {
     data() {
@@ -24,7 +24,14 @@ export default {
                 {
                     id: 'unstyled',
                     label: 'Unstyled',
-                    component: UnstyledDoc
+                    description: 'Theming is implemented with the pass through properties in unstyled mode.',
+                    children: [
+                        {
+                            id: 'tailwind',
+                            label: 'Tailwind',
+                            component: TailwindDoc
+                        }
+                    ]
                 }
             ]
         };
diff --git a/doc/selectbutton/theming/TailwindDoc.vue b/doc/selectbutton/theming/TailwindDoc.vue
new file mode 100644
index 000000000..87b1f9b0d
--- /dev/null
+++ b/doc/selectbutton/theming/TailwindDoc.vue
@@ -0,0 +1,61 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
+            <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
+        </p>
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <DocSectionCode :code="code2" embedded />
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code1: {
+                basic: `
+export default {
+    selectbutton: {
+        root: ({ props }) => ({
+            class: [{ 'opacity-60 select-none pointer-events-none cursor-default': props.disabled }]
+        }),
+        button: ({ context }) => ({
+            class: [
+                'inline-flex cursor-pointer select-none items-center align-bottom text-center overflow-hidden relative',
+                'px-4 py-3',
+                'transition duration-200 border border-r-0',
+                'first:rounded-l-md first:rounded-tr-none first:rounded-br-none last:border-r last:rounded-tl-none last:rounded-bl-none last:rounded-r-md',
+                'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]',
+                {
+                    'bg-white dark:bg-gray-900 text-gray-700 dark:text-white/80 border-gray-300 dark:border-blue-900/40 hover:bg-gray-50 dark:hover:bg-gray-800/80 ': !context.active,
+                    'bg-blue-500 border-blue-500 text-white hover:bg-blue-600': context.active,
+                    'opacity-60 select-none pointer-events-none cursor-default': context.disabled
+                }
+            ]
+        }),
+        label: 'font-bold'
+    }
+}
+`
+            },
+            code2: {
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <SelectButton v-model="value" :options="options" aria-labelledby="basic" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref('Off');
+const options = ref(['Off', 'On']);
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/selectbutton/theming/UnstyledDoc.vue b/doc/selectbutton/theming/UnstyledDoc.vue
deleted file mode 100644
index d61aa8c15..000000000
--- a/doc/selectbutton/theming/UnstyledDoc.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
-    </DocSectionText>
-    <DocSectionCode :code="code" embedded />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <SelectButton v-model="value" :options="options" aria-labelledby="basic" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value = ref('Off');
-const options = ref(['Off', 'On']);
-<\/script>`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/selectbutton/theming/index.vue b/doc/selectbutton/theming/index.vue
index 5794035d3..6cf3f5f18 100644
--- a/doc/selectbutton/theming/index.vue
+++ b/doc/selectbutton/theming/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import StyledDoc from './StyledDoc.vue';
-import UnstyledDoc from './UnstyledDoc.vue';
+import TailwindDoc from './TailwindDoc.vue';
 
 export default {
     data() {
@@ -24,7 +24,14 @@ export default {
                 {
                     id: 'unstyled',
                     label: 'Unstyled',
-                    component: UnstyledDoc
+                    description: 'Theming is implemented with the pass through properties in unstyled mode.',
+                    children: [
+                        {
+                            id: 'tailwind',
+                            label: 'Tailwind',
+                            component: TailwindDoc
+                        }
+                    ]
                 }
             ]
         };
diff --git a/doc/slider/theming/TailwindDoc.vue b/doc/slider/theming/TailwindDoc.vue
new file mode 100644
index 000000000..e85e55f2a
--- /dev/null
+++ b/doc/slider/theming/TailwindDoc.vue
@@ -0,0 +1,96 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
+            <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
+        </p>
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <DocSectionCode :code="code2" embedded />
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code1: {
+                basic: `
+export default {
+    slider: {
+        root: ({ props }) => ({
+            class: [
+                'relative',
+                'bg-gray-100 dark:bg-gray-800 border-0 rounded-6',
+                { 'h-1 w-56': props.orientation == 'horizontal', 'w-1 h-56': props.orientation == 'vertical' },
+                { 'opacity-60 select-none pointer-events-none cursor-default': props.disabled }
+            ]
+        }),
+        range: ({ props }) => ({
+            class: [
+                'bg-blue-500',
+                'block absolute',
+                {
+                    'top-0 left-0 h-full': props.orientation == 'horizontal',
+                    'bottom-0 left-0 w-full': props.orientation == 'vertical'
+                }
+            ]
+        }),
+        handle: ({ props }) => ({
+            class: [
+                'h-4 w-4 bg-white dark:bg-gray-600 border-2 border-blue-500 rounded-full transition duration-200',
+                'cursor-grab touch-action-none block',
+                'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]',
+                'hover:bg-blue-500 hover:border hover:border-blue-500',
+                {
+                    'top-[50%] mt-[-0.5715rem] ml-[-0.5715rem]': props.orientation == 'horizontal',
+                    'left-[50%] mb-[-0.5715rem] ml-[-0.4715rem]': props.orientation == 'vertical'
+                }
+            ]
+        }),
+        starthandler: ({ props }) => ({
+            class: [
+                'h-4 w-4 bg-white dark:bg-gray-600 border-2 border-blue-500 rounded-full transition duration-200',
+                'cursor-grab touch-action-none block',
+                'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]',
+                'hover:bg-blue-500 hover:border hover:border-blue-500',
+                {
+                    'top-[50%] mt-[-0.5715rem] ml-[-0.5715rem]': props.orientation == 'horizontal',
+                    'left-[50%] mb-[-0.5715rem] ml-[-0.4715rem]': props.orientation == 'vertical'
+                }
+            ]
+        }),
+        endhandler: ({ props }) => ({
+            class: [
+                'h-4 w-4 bg-white dark:bg-gray-600 border-2 border-blue-500 rounded-full transition duration-200',
+                'cursor-grab touch-action-none block',
+                'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]',
+                'hover:bg-blue-500 hover:border hover:border-blue-500',
+                {
+                    'top-[50%] mt-[-0.5715rem] ml-[-0.5715rem]': props.orientation == 'horizontal',
+                    'left-[50%] mb-[-0.5715rem] ml-[-0.4715rem]': props.orientation == 'vertical'
+                }
+            ]
+        })
+    }
+}
+`
+            },
+            code2: {
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Slider v-model="value" class="w-14rem" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref(null);
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/slider/theming/UnstyledDoc.vue b/doc/slider/theming/UnstyledDoc.vue
deleted file mode 100644
index 9b2ef798c..000000000
--- a/doc/slider/theming/UnstyledDoc.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
-    </DocSectionText>
-    <DocSectionCode :code="code" embedded />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Slider v-model="value" class="w-14rem" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value = ref(null);
-<\/script>`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/slider/theming/index.vue b/doc/slider/theming/index.vue
index e3c307a47..a22cb9bbc 100644
--- a/doc/slider/theming/index.vue
+++ b/doc/slider/theming/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import StyledDoc from './StyledDoc.vue';
-import UnstyledDoc from './UnstyledDoc.vue';
+import TailwindDoc from './TailwindDoc.vue';
 
 export default {
     data() {
@@ -24,7 +24,14 @@ export default {
                 {
                     id: 'unstyled',
                     label: 'Unstyled',
-                    component: UnstyledDoc
+                    description: 'Theming is implemented with the pass through properties in unstyled mode.',
+                    children: [
+                        {
+                            id: 'tailwind',
+                            label: 'Tailwind',
+                            component: TailwindDoc
+                        }
+                    ]
                 }
             ]
         };
diff --git a/doc/steps/theming/TailwindDoc.vue b/doc/steps/theming/TailwindDoc.vue
new file mode 100644
index 000000000..f393ebe33
--- /dev/null
+++ b/doc/steps/theming/TailwindDoc.vue
@@ -0,0 +1,79 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
+            <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
+        </p>
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <DocSectionCode :code="code2" embedded />
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code1: {
+                basic: `
+export default {
+    steps: {
+        root: 'relative',
+        menu: 'p-0 m-0 list-none flex',
+        menuitem: {
+            class: ['relative flex justify-center flex-1 overflow-hidden', 'before:border-t before:border-gray-300 before:dark:border-blue-900/40 before:w-full before:absolute before:top-1/4 before:left-0 before:transform before:-translate-y-1/2']
+        },
+        action: {
+            class: [
+                'inline-flex flex-col items-center overflow-hidden',
+                'transition-shadow rounded-md bg-white dark:bg-transparent',
+                'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]'
+            ]
+        },
+        step: {
+            class: ['flex items-center justify-center', 'text-gray-700 dark:text-white/80 border border-gray-300 dark:border-blue-900/40  bg-white dark:bg-gray-900 w-[2rem] h-[2rem] leading-2rem text-sm z-10 rounded-full']
+        },
+        label: {
+            class: ['block', 'whitespace-nowrap overflow-hidden overflow-ellipsis max-w-full', 'mt-2 text-gray-500 dark:text-white/60']
+        }
+    }
+}
+`
+            },
+            code2: {
+                composition: `
+<template>
+    <div>
+        <div class="card">
+            <Steps :model="items" :readonly="false" aria-label="Form Steps" />
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const items = ref([
+    {
+        label: 'Personal',
+        to: "/"
+    },
+    {
+        label: 'Seat',
+        to: "/seat",
+    },
+    {
+        label: 'Payment',
+        to: "/payment",
+    },
+    {
+        label: 'Confirmation',
+        to: "/confirmation",
+    }
+]);
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/steps/theming/UnstyledDoc.vue b/doc/steps/theming/UnstyledDoc.vue
deleted file mode 100644
index f82b3c5ed..000000000
--- a/doc/steps/theming/UnstyledDoc.vue
+++ /dev/null
@@ -1,48 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
-    </DocSectionText>
-    <DocSectionCode :code="code" embedded />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                composition: `
-<template>
-    <div>
-        <div class="card">
-            <Steps :model="items" :readonly="false" aria-label="Form Steps" />
-        </div>
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const items = ref([
-    {
-        label: 'Personal',
-        to: "/"
-    },
-    {
-        label: 'Seat',
-        to: "/seat",
-    },
-    {
-        label: 'Payment',
-        to: "/payment",
-    },
-    {
-        label: 'Confirmation',
-        to: "/confirmation",
-    }
-]);
-<\/script>`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/steps/theming/index.vue b/doc/steps/theming/index.vue
index dc4c76b5e..ff9d7c4f2 100644
--- a/doc/steps/theming/index.vue
+++ b/doc/steps/theming/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import StyledDoc from './StyledDoc.vue';
-import UnstyledDoc from './UnstyledDoc.vue';
+import TailwindDoc from './TailwindDoc.vue';
 
 export default {
     data() {
@@ -24,7 +24,14 @@ export default {
                 {
                     id: 'unstyled',
                     label: 'Unstyled',
-                    component: UnstyledDoc
+                    description: 'Theming is implemented with the pass through properties in unstyled mode.',
+                    children: [
+                        {
+                            id: 'tailwind',
+                            label: 'Tailwind',
+                            component: TailwindDoc
+                        }
+                    ]
                 }
             ]
         };
diff --git a/doc/tabmenu/theming/UnstyledDoc.vue b/doc/tabmenu/theming/TailwindDoc.vue
similarity index 54%
rename from doc/tabmenu/theming/UnstyledDoc.vue
rename to doc/tabmenu/theming/TailwindDoc.vue
index 0ce7fe617..05e48a3da 100644
--- a/doc/tabmenu/theming/UnstyledDoc.vue
+++ b/doc/tabmenu/theming/TailwindDoc.vue
@@ -1,15 +1,46 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
+        <p>
+            PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
+            <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
+        </p>
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <DocSectionCode :code="code2" embedded />
     </DocSectionText>
-    <DocSectionCode :code="code" embedded />
 </template>
 
 <script>
 export default {
     data() {
         return {
-            code: {
+            code1: {
+                basic: `
+export default {
+    tabmenu: {
+        root: 'overflow-x-auto',
+        menu: {
+            class: ['flex m-0 p-0 list-none flex-nowrap', 'bg-white border-solid border-gray-300 border-b-2', 'outline-none no-underline text-base list-none']
+        },
+        menuitem: 'mr-0',
+        action: ({ context, state }) => ({
+            class: [
+                'cursor-pointer select-none flex items-center relative no-underline overflow-hidden',
+                'border-b-2 p-5 font-bold rounded-t-lg ',
+                'focus:outline-none focus:outline-offset-0 focus:shadow-[inset_0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]',
+                {
+                    'border-gray-300 bg-white text-gray-700 hover:bg-white hover:border-gray-400 hover:text-gray-600 dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80 dark:hover:bg-gray-800/80': state.d_activeIndex !== context.index, // Condition-based hover styles.
+                    'bg-white border-blue-500 text-blue-500 dark:bg-gray-900 dark:border-blue-300 dark:text-blue-300': state.d_activeIndex === context.index // Condition-based active styles.
+                }
+            ],
+            style: 'top:2px'
+        }),
+        icon: 'mr-2'
+    }
+}
+`
+            },
+            code2: {
                 composition: `
 <template>
     <div class="card">
diff --git a/doc/tabmenu/theming/index.vue b/doc/tabmenu/theming/index.vue
index 096b92de1..745991391 100644
--- a/doc/tabmenu/theming/index.vue
+++ b/doc/tabmenu/theming/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import StyledDoc from './StyledDoc.vue';
-import UnstyledDoc from './UnstyledDoc.vue';
+import TailwindDoc from './TailwindDoc.vue';
 
 export default {
     data() {
@@ -24,7 +24,14 @@ export default {
                 {
                     id: 'unstyled',
                     label: 'Unstyled',
-                    component: UnstyledDoc
+                    description: 'Theming is implemented with the pass through properties in unstyled mode.',
+                    children: [
+                        {
+                            id: 'tailwind',
+                            label: 'Tailwind',
+                            component: TailwindDoc
+                        }
+                    ]
                 }
             ]
         };
diff --git a/doc/textarea/theming/TailwindDoc.vue b/doc/textarea/theming/TailwindDoc.vue
new file mode 100644
index 000000000..a7d20e5df
--- /dev/null
+++ b/doc/textarea/theming/TailwindDoc.vue
@@ -0,0 +1,50 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
+            <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
+        </p>
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <DocSectionCode :code="code2" embedded />
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code1: {
+                basic: `
+export default {
+    textarea: {
+        root: ({ context }) => ({
+            class: [
+                'm-0',
+                'font-sans text-base text-gray-600 dark:text-white/80 bg-white dark:bg-gray-900 p-3 border border-gray-300 dark:border-blue-900/40 transition-colors duration-200 appearance-none rounded-lg',
+                'hover:border-blue-500 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]',
+                { 'opacity-60 select-none pointer-events-none cursor-default': context.disabled }
+            ]
+        })
+    }
+}
+`
+            },
+            code2: {
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Textarea v-model="value" rows="5" cols="30" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref('');
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/textarea/theming/UnstyledDoc.vue b/doc/textarea/theming/UnstyledDoc.vue
deleted file mode 100644
index 9f095040b..000000000
--- a/doc/textarea/theming/UnstyledDoc.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
-    </DocSectionText>
-    <DocSectionCode :code="code" embedded />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Textarea v-model="value" rows="5" cols="30" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value = ref('');
-<\/script>`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/textarea/theming/index.vue b/doc/textarea/theming/index.vue
index ac7964d8f..adf613b0a 100644
--- a/doc/textarea/theming/index.vue
+++ b/doc/textarea/theming/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import StyledDoc from './StyledDoc.vue';
-import UnstyledDoc from './UnstyledDoc.vue';
+import TailwindDoc from './TailwindDoc.vue';
 
 export default {
     data() {
@@ -24,7 +24,14 @@ export default {
                 {
                     id: 'unstyled',
                     label: 'Unstyled',
-                    component: UnstyledDoc
+                    description: 'Theming is implemented with the pass through properties in unstyled mode.',
+                    children: [
+                        {
+                            id: 'tailwind',
+                            label: 'Tailwind',
+                            component: TailwindDoc
+                        }
+                    ]
                 }
             ]
         };
diff --git a/doc/tieredmenu/theming/UnstyledDoc.vue b/doc/tieredmenu/theming/TailwindDoc.vue
similarity index 56%
rename from doc/tieredmenu/theming/UnstyledDoc.vue
rename to doc/tieredmenu/theming/TailwindDoc.vue
index 02b998386..81dd48c37 100644
--- a/doc/tieredmenu/theming/UnstyledDoc.vue
+++ b/doc/tieredmenu/theming/TailwindDoc.vue
@@ -1,15 +1,73 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
+        <p>
+            PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
+            <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
+        </p>
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <DocSectionCode :code="code2" embedded />
     </DocSectionText>
-    <DocSectionCode :code="code" embedded />
 </template>
 
 <script>
 export default {
     data() {
         return {
-            code: {
+            code1: {
+                basic: `
+export const TRANSITIONS = {
+    overlay: {
+        enterFromClass: 'opacity-0 scale-75',
+        enterActiveClass: 'transition-transform transition-opacity duration-150 ease-in',
+        leaveActiveClass: 'transition-opacity duration-150 ease-linear',
+        leaveToClass: 'opacity-0'
+    }
+};
+
+export default {
+    tieredmenu: {
+        root: {
+            class: ['py-1 bg-white border border-gray-300 rounded-lg w-[12.5rem]', 'dark:border-blue-900/40 dark:bg-gray-900']
+        },
+        menu: {
+            class: ['outline-none', 'm-0 p-0 list-none']
+        },
+        menuitem: 'relative',
+        content: ({ context }) => ({
+            class: [
+                'transition-shadow duration-200 border-none rounded-none',
+                'hover:bg-gray-200 hover:text-gray-700 dark:hover:text-white/80 dark:hover:bg-gray-800/80', //Hover
+                {
+                    'text-gray-700': !context.focused && !context.active,
+                    'bg-gray-300 text-gray-700 dark:text-white/80 dark:bg-gray-800/90': context.focused && !context.active,
+                    'bg-blue-100 text-blue-700 dark:bg-blue-400 dark:text-white/80': context.focused && context.active,
+                    'bg-blue-50 text-blue-700 dark:bg-blue-300 dark:text-white/80': !context.focused && context.active
+                }
+            ]
+        }),
+        action: ({ context }) => ({
+            class: [
+                'py-3 px-5 select-none',
+                'flex items-center cursor-pointer no-underline relative overflow-hidden',
+                {
+                    'text-gray-700 dark:text-white/80 hover:text-gray-700 dark:hover:text-white/80 hover:bg-gray-200 dark:hover:bg-gray-800/80': !context.active,
+                    'text-blue-600 bg-blue-100': context.active
+                }
+            ]
+        }),
+        icon: 'mr-2',
+        submenuicon: 'ml-auto',
+        separator: 'border-t border-gray-300 my-1 dark:border-blue-900/40',
+        submenu: {
+            class: ['py-1 bg-white dark:bg-gray-900 border-0 shadow-md min-w-full', 'absolute z-10', 'left-full top-0']
+        },
+        transition: TRANSITIONS.overlay
+    }
+}
+`
+            },
+            code2: {
                 composition: `
 <template>
     <div class="card flex justify-center">
diff --git a/doc/tieredmenu/theming/index.vue b/doc/tieredmenu/theming/index.vue
index 928b251bd..e5148a296 100644
--- a/doc/tieredmenu/theming/index.vue
+++ b/doc/tieredmenu/theming/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import StyledDoc from './StyledDoc.vue';
-import UnstyledDoc from './UnstyledDoc.vue';
+import TailwindDoc from './TailwindDoc.vue';
 
 export default {
     data() {
@@ -24,7 +24,14 @@ export default {
                 {
                     id: 'unstyled',
                     label: 'Unstyled',
-                    component: UnstyledDoc
+                    description: 'Theming is implemented with the pass through properties in unstyled mode.',
+                    children: [
+                        {
+                            id: 'tailwind',
+                            label: 'Tailwind',
+                            component: TailwindDoc
+                        }
+                    ]
                 }
             ]
         };
diff --git a/doc/timeline/theming/TailwindDoc.vue b/doc/timeline/theming/TailwindDoc.vue
new file mode 100644
index 000000000..6323bc72f
--- /dev/null
+++ b/doc/timeline/theming/TailwindDoc.vue
@@ -0,0 +1,138 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
+            <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
+        </p>
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <DocSectionCode :code="code2" embedded />
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code1: {
+                basic: `
+export default {
+    timeline: {
+        root: ({ props }) => ({
+            class: [
+                'flex grow',
+                {
+                    'flex-col': props.layout === 'vertical',
+                    'flex-row flex-1': props.layout === 'horizontal'
+                }
+            ]
+        }),
+        event: ({ props, context }) => ({
+            class: [
+                'flex relative min-h-[70px]',
+                {
+                    'flex-row-reverse': props.align === 'right' || (props.layout === 'vertical' && props.align === 'alternate' && context.index % 2 === 1),
+                    'flex-col flex-1': props.layout === 'horizontal',
+                    'flex-col-reverse ': props.align === 'bottom' || (props.layout === 'horizontal' && props.align === 'alternate' && context.index % 2 === 1)
+                }
+            ]
+        }),
+        opposite: ({ props, context }) => ({
+            class: [
+                'flex-1',
+                {
+                    'px-4': props.layout === 'vertical',
+                    'py-4': props.layout === 'horizontal'
+                },
+                {
+                    'text-right': props.align === 'left' || (props.layout === 'vertical' && props.align === 'alternate' && context.index % 2 === 0),
+                    'text-left': props.align === 'right' || (props.layout === 'vertical' && props.align === 'alternate' && context.index % 2 === 1)
+                }
+            ]
+        }),
+        separator: ({ props }) => ({
+            class: [
+                'flex items-center flex-initial',
+                {
+                    'flex-col': props.layout === 'vertical',
+                    'flex-row': props.layout === 'horizontal'
+                }
+            ]
+        }),
+        marker: 'flex self-baseline w-4 h-4 rounded-full border-2 border-blue-500 bg-white dark:border-blue-300 dark:bg-blue-900/40',
+        connector: ({ props }) => ({
+            class: [
+                'grow bg-gray-300 dark:bg-blue-900/40',
+                {
+                    'w-[2px]': props.layout === 'vertical',
+                    'w-full h-[2px]': props.layout === 'horizontal'
+                }
+            ]
+        }),
+        content: ({ props, context }) => ({
+            class: [
+                'flex-1',
+                {
+                    'px-4': props.layout === 'vertical',
+                    'py-4': props.layout === 'horizontal'
+                },
+                {
+                    'text-left': props.align === 'left' || (props.layout === 'vertical' && props.align === 'alternate' && context.index % 2 === 0),
+                    'text-right': props.align === 'right' || (props.layout === 'vertical' && props.align === 'alternate' && context.index % 2 === 1)
+                },
+                {
+                    'min-h-0': props.layout === 'vertical' && context.index === context.count,
+                    'grow-0': props.layout === 'horizontal' && context.index === context.count
+                }
+            ]
+        })
+    }
+}
+`
+            },
+            code2: {
+                composition: `
+<template>
+    <div class="card flex flex-wrap gap-6">
+        <Timeline :value="events" class="w-full md:w-80">
+            <template #content="slotProps">
+                <span class="text-gray-700 dark:text-white/80">
+                    {{ slotProps.item.status }}
+                </span>
+            </template>
+        </Timeline>
+
+        <Timeline :value="events" align="right" class="w-full md:w-80">
+            <template #content="slotProps">
+                <span class="text-gray-700 dark:text-white/80">
+                    {{ slotProps.item.status }}
+                </span>
+            </template>
+        </Timeline>
+
+        <Timeline :value="events" align="alternate" class="w-full md:w-80">
+            <template #content="slotProps">
+                <span class="text-gray-700 dark:text-white/80">
+                    {{ slotProps.item.status }}
+                </span>
+            </template>
+        </Timeline>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const events = ref([
+    { status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0'},
+    { status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7' },
+    { status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800' },
+    { status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B' }
+]);
+
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/timeline/theming/UnstyledDoc.vue b/doc/timeline/theming/UnstyledDoc.vue
deleted file mode 100644
index 7e7ba5975..000000000
--- a/doc/timeline/theming/UnstyledDoc.vue
+++ /dev/null
@@ -1,57 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
-    </DocSectionText>
-    <DocSectionCode :code="code" embedded />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                composition: `
-<template>
-    <div class="card flex flex-wrap gap-6">
-        <Timeline :value="events" class="w-full md:w-80">
-            <template #content="slotProps">
-                <span class="text-gray-700 dark:text-white/80">
-                    {{ slotProps.item.status }}
-                </span>
-            </template>
-        </Timeline>
-
-        <Timeline :value="events" align="right" class="w-full md:w-80">
-            <template #content="slotProps">
-                <span class="text-gray-700 dark:text-white/80">
-                    {{ slotProps.item.status }}
-                </span>
-            </template>
-        </Timeline>
-
-        <Timeline :value="events" align="alternate" class="w-full md:w-80">
-            <template #content="slotProps">
-                <span class="text-gray-700 dark:text-white/80">
-                    {{ slotProps.item.status }}
-                </span>
-            </template>
-        </Timeline>
-    </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-
-const events = ref([
-    { status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0'},
-    { status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7' },
-    { status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800' },
-    { status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B' }
-]);
-
-<\/script>`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/timeline/theming/index.vue b/doc/timeline/theming/index.vue
index 60f7b1375..08bbb524c 100644
--- a/doc/timeline/theming/index.vue
+++ b/doc/timeline/theming/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import StyledDoc from './StyledDoc.vue';
-import UnstyledDoc from './UnstyledDoc.vue';
+import TailwindDoc from './TailwindDoc.vue';
 
 export default {
     data() {
@@ -24,7 +24,14 @@ export default {
                 {
                     id: 'unstyled',
                     label: 'Unstyled',
-                    component: UnstyledDoc
+                    description: 'Theming is implemented with the pass through properties in unstyled mode.',
+                    children: [
+                        {
+                            id: 'tailwind',
+                            label: 'Tailwind',
+                            component: TailwindDoc
+                        }
+                    ]
                 }
             ]
         };
diff --git a/doc/togglebutton/theming/TailwindDoc.vue b/doc/togglebutton/theming/TailwindDoc.vue
new file mode 100644
index 000000000..0e3d1ce24
--- /dev/null
+++ b/doc/togglebutton/theming/TailwindDoc.vue
@@ -0,0 +1,68 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
+            <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
+        </p>
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <DocSectionCode :code="code2" embedded />
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code1: {
+                basic: `
+export default {
+    togglebutton: {
+        root: ({ props, context }) => ({
+            class: [
+                'inline-flex cursor-pointer select-none items-center align-bottom text-center overflow-hidden relative',
+                'px-4 py-3 rounded-md text-base w-36',
+                'border transition duration-200 ease-in-out',
+                {
+                    'outline-none outline-offset-0 shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]': context.focused
+                },
+                {
+                    'bg-white dark:bg-gray-900 border-gray-300 dark:border-blue-900/40 text-gray-700 dark:text-white/80 hover:bg-gray-100 dark:hover:bg-gray-800/80 hover:border-gray-300 dark:hover:bg-gray-800/70 hover:text-gray-700 dark:hover:text-white/80':
+                        !props.modelValue,
+                    'bg-blue-500 border-blue-500 text-white hover:bg-blue-600 hover:border-blue-600': props.modelValue
+                },
+                { 'opacity-60 select-none pointer-events-none cursor-default': props.disabled }
+            ]
+        }),
+        label: 'font-bold text-center w-full',
+        icon: ({ props }) => ({
+            class: [
+                ' mr-2',
+                {
+                    'text-gray-600 dark:text-white/70': !props.modelValue,
+                    'text-white': props.modelValue
+                }
+            ]
+        })
+    }
+}
+`
+            },
+            code2: {
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <ToggleButton v-model="checked" class="w-8rem" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const checked = ref(false);
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/togglebutton/theming/UnstyledDoc.vue b/doc/togglebutton/theming/UnstyledDoc.vue
deleted file mode 100644
index 3d431bf60..000000000
--- a/doc/togglebutton/theming/UnstyledDoc.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
-    </DocSectionText>
-    <DocSectionCode :code="code" embedded />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <ToggleButton v-model="checked" class="w-8rem" />
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const checked = ref(false);
-<\/script>`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/togglebutton/theming/index.vue b/doc/togglebutton/theming/index.vue
index ccbb78066..acf8bdc2c 100644
--- a/doc/togglebutton/theming/index.vue
+++ b/doc/togglebutton/theming/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import StyledDoc from './StyledDoc.vue';
-import UnstyledDoc from './UnstyledDoc.vue';
+import TailwindDoc from './TailwindDoc.vue';
 
 export default {
     data() {
@@ -24,7 +24,14 @@ export default {
                 {
                     id: 'unstyled',
                     label: 'Unstyled',
-                    component: UnstyledDoc
+                    description: 'Theming is implemented with the pass through properties in unstyled mode.',
+                    children: [
+                        {
+                            id: 'tailwind',
+                            label: 'Tailwind',
+                            component: TailwindDoc
+                        }
+                    ]
                 }
             ]
         };
diff --git a/doc/tree/theming/TailwindDoc.vue b/doc/tree/theming/TailwindDoc.vue
new file mode 100644
index 000000000..0b8206ab0
--- /dev/null
+++ b/doc/tree/theming/TailwindDoc.vue
@@ -0,0 +1,108 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
+            <PrimeVuePrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVuePrimeVueNuxtLink> section for an example.
+        </p>
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <DocSectionCode :code="code2" :service="['NodeService']" embedded />
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code1: {
+                basic: `
+export default {
+    tree: {
+        root: {
+            class: ['max-w-[30rem] md:w-full', 'border border-solid border-gray-300 dark:border-blue-900/40 bg-white dark:bg-gray-900 text-gray-700 dark:text-white/80 p-5 rounded-md']
+        },
+        wrapper: 'overflow-auto',
+        container: 'm-0 p-0 list-none overflow-auto',
+        node: 'p-1 outline-none',
+        content: ({ context, props }) => ({
+            class: [
+                'flex items-center',
+                'rounded-lg transition-shadow duration-200 p-2',
+                'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]',
+                { 'bg-blue-50 text-blue-600': context.selected },
+                { 'cursor-pointer select-none': props.selectionMode == 'single' || props.selectionMode == 'multiple' }
+            ]
+        }),
+        toggler: ({ context }) => ({
+            class: [
+                'cursor-pointer select-none inline-flex items-center justify-center overflow-hidden relative shrink-0',
+                'mr-2 w-8 h-8 border-0 bg-transparent rounded-full transition duration-200',
+                'hover:border-transparent focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]',
+                {
+                    'text-gray-500 dark:text-white/80 hover:bg-gray-200 dark:hover:bg-gray-800/80  hover:text-gray-800 dark:hover:text-white/80': !context.selected,
+                    'text-blue-600 hover:bg-white/30': context.selected
+                },
+                {
+                    hidden: context.leaf
+                }
+            ]
+        }),
+        checkboxcontainer: 'mr-2',
+        checkbox: ({ context, props }) => ({
+            class: [
+                'cursor-pointer inline-flex relative select-none align-bottom',
+                'w-6 h-6',
+                'flex items-center justify-center',
+                'border-2 w-6 h-6 rounded-lg transition-colors duration-200 text-white text-base dark:text-gray-900',
+                {
+                    'border-gray-300 bg-white dark:border-blue-900/40 dark:bg-gray-900': !context.checked,
+                    'border-blue-500 text-white bg-blue-500 dark:border-blue-400 dark:bg-blue-400': context.checked
+                },
+                {
+                    'hover:border-blue-500 dark:hover:border-blue-400 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]': !props.disabled,
+                    'cursor-default opacity-60': props.disabled
+                }
+            ]
+        }),
+        nodeicon: 'mr-2 text-gray-600 dark:text-white/70',
+        subgroup: {
+            class: ['m-0 list-none', 'p-0 pl-4']
+        },
+        filtercontainer: {
+            class: ['mb-2', 'relative block w-full']
+        },
+        input: {
+            class: [
+                'm-0 p-3 text-base w-full pr-7',
+                'font-sans text-gray-600 dark:text-white/70 bg-white dark:bg-gray-900 border border-gray-300 dark:border-blue-900/40 transition-colors duration-200 appearance-none rounded-lg',
+                'hover:border-blue-500 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]'
+            ]
+        },
+        searchicon: 'absolute top-1/2 -mt-2 right-3 text-gray-600 dark:hover:text-white/70'
+    }
+}
+`
+            },
+            code2: {
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Tree :value="nodes" class="w-full md:w-[30rem]"></Tree>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { NodeService } from '@/service/NodeService';
+
+const nodes = ref(null);
+
+onMounted(() => {
+    NodeService.getTreeNodes().then((data) => (nodes.value = data));
+});
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/tree/theming/UnstyledDoc.vue b/doc/tree/theming/UnstyledDoc.vue
deleted file mode 100644
index 602f850d2..000000000
--- a/doc/tree/theming/UnstyledDoc.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
-    </DocSectionText>
-    <DocSectionCode :code="code" :service="['NodeService']" embedded />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Tree :value="nodes" class="w-full md:w-[30rem]"></Tree>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-import { NodeService } from '@/service/NodeService';
-
-const nodes = ref(null);
-
-onMounted(() => {
-    NodeService.getTreeNodes().then((data) => (nodes.value = data));
-});
-<\/script>`,
-                data: `
-{
-    key: '0',
-    label: 'Documents',
-    data: 'Documents Folder',
-    icon: 'pi pi-fw pi-inbox',
-    children: [
-        {
-            key: '0-0',
-            label: 'Work',
-            data: 'Work Folder',
-            icon: 'pi pi-fw pi-cog',
-            children: [
-                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
-                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
-            ]
-        },
-        {
-            key: '0-1',
-            label: 'Home',
-            data: 'Home Folder',
-            icon: 'pi pi-fw pi-home',
-            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
-        }
-    ]
-},
-...`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/tree/theming/index.vue b/doc/tree/theming/index.vue
index 41d3880a4..5386ea69d 100644
--- a/doc/tree/theming/index.vue
+++ b/doc/tree/theming/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import StyledDoc from './StyledDoc.vue';
-import UnstyledDoc from './UnstyledDoc.vue';
+import TailwindDoc from './TailwindDoc.vue';
 
 export default {
     data() {
@@ -24,7 +24,14 @@ export default {
                 {
                     id: 'unstyled',
                     label: 'Unstyled',
-                    component: UnstyledDoc
+                    description: 'Theming is implemented with the pass through properties in unstyled mode.',
+                    children: [
+                        {
+                            id: 'tailwind',
+                            label: 'Tailwind',
+                            component: TailwindDoc
+                        }
+                    ]
                 }
             ]
         };
diff --git a/doc/treeselect/theming/TailwindDoc.vue b/doc/treeselect/theming/TailwindDoc.vue
new file mode 100644
index 000000000..411600dc7
--- /dev/null
+++ b/doc/treeselect/theming/TailwindDoc.vue
@@ -0,0 +1,89 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
+            <NuxtLink to="/tailwind">Tailwind Customization</NuxtLink> section for an example.
+        </p>
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <DocSectionCode :code="code2" :service="['NodeService']" embedded />
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code1: {
+                basic: `
+export const TRANSITIONS = {
+    toggleable: {
+        enterFromClass: 'max-h-0',
+        enterActiveClass: 'overflow-hidden transition-all duration-500 ease-in-out',
+        enterToClass: 'max-h-40	',
+        leaveFromClass: 'max-h-40',
+        leaveActiveClass: 'overflow-hidden transition-all duration-500 ease-in',
+        leaveToClass: 'max-h-0'
+    },
+    overlay: {
+        enterFromClass: 'opacity-0 scale-75',
+        enterActiveClass: 'transition-transform transition-opacity duration-150 ease-in',
+        leaveActiveClass: 'transition-opacity duration-150 ease-linear',
+        leaveToClass: 'opacity-0'
+    }
+};
+
+export default {
+    treeselect: {
+        root: ({ props }) => ({
+            class: [
+                'inline-flex cursor-pointer select-none',
+                'bg-white dark:bg-gray-900 border border-gray-400 dark:border-blue-900/40  transition-colors duration-200 ease-in-out rounded-md',
+                'w-full md:w-80',
+                { 'opacity-60 select-none pointer-events-none cursor-default': props?.disabled }
+            ]
+        }),
+        labelContainer: {
+            class: ['overflow-hidden flex flex-auto cursor-pointer']
+        },
+        label: {
+            class: ['block overflow-hidden whitespace-nowrap cursor-pointer overflow-ellipsis', 'text-gray-800 dark:text-white/80', 'p-3 transition duration-200']
+        },
+        trigger: {
+            class: ['flex items-center justify-center shrink-0', 'bg-transparent text-gray-600 dark:text-white/70 w-12 rounded-tr-lg rounded-br-lg']
+        },
+        panel: {
+            class: ['bg-white dark:bg-gray-900 text-gray-700 dark:text-white/80 border-0 rounded-md shadow-lg']
+        },
+        wrapper: {
+            class: ['max-h-[200px] overflow-auto', 'bg-white dark:bg-gray-900 text-gray-700 dark:text-white/80 border-0 rounded-md shadow-lg']
+        },
+        transition: TRANSITIONS.overlay
+    },
+}
+`
+            },
+            code2: {
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <TreeSelect v-model="selectedValue" :options="nodes" placeholder="Select Item" class="md:w-20rem w-full" />
+    </div> 
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { NodeService } from './service/NodeService';
+
+const nodes = ref(null);
+const selectedValue = ref(null);
+
+onMounted(() => {
+    NodeService.getTreeNodes().then((data) => (nodes.value = data));
+});
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/treeselect/theming/UnstyledDoc.vue b/doc/treeselect/theming/UnstyledDoc.vue
deleted file mode 100644
index 0a8ca5848..000000000
--- a/doc/treeselect/theming/UnstyledDoc.vue
+++ /dev/null
@@ -1,62 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
-    </DocSectionText>
-    <DocSectionCode :code="code" :service="['NodeService']" embedded />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <TreeSelect v-model="selectedValue" :options="nodes" placeholder="Select Item" class="md:w-20rem w-full" />
-    </div> 
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-import { NodeService } from './service/NodeService';
-
-const nodes = ref(null);
-const selectedValue = ref(null);
-
-onMounted(() => {
-    NodeService.getTreeNodes().then((data) => (nodes.value = data));
-});
-<\/script>`,
-                data: `
-{
-    key: '0',
-    label: 'Documents',
-    data: 'Documents Folder',
-    icon: 'pi pi-fw pi-inbox',
-    children: [
-        {
-            key: '0-0',
-            label: 'Work',
-            data: 'Work Folder',
-            icon: 'pi pi-fw pi-cog',
-            children: [
-                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
-                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
-            ]
-        },
-        {
-            key: '0-1',
-            label: 'Home',
-            data: 'Home Folder',
-            icon: 'pi pi-fw pi-home',
-            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
-        }
-    ]
-},
-...`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/treeselect/theming/index.vue b/doc/treeselect/theming/index.vue
index e464c4aa6..1b47f4699 100644
--- a/doc/treeselect/theming/index.vue
+++ b/doc/treeselect/theming/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import StyledDoc from './StyledDoc.vue';
-import UnstyledDoc from './UnstyledDoc.vue';
+import TailwindDoc from './TailwindDoc.vue';
 
 export default {
     data() {
@@ -24,7 +24,14 @@ export default {
                 {
                     id: 'unstyled',
                     label: 'Unstyled',
-                    component: UnstyledDoc
+                    description: 'Theming is implemented with the pass through properties in unstyled mode.',
+                    children: [
+                        {
+                            id: 'tailwind',
+                            label: 'Tailwind',
+                            component: TailwindDoc
+                        }
+                    ]
                 }
             ]
         };
diff --git a/doc/treetable/theming/TailwindDoc.vue b/doc/treetable/theming/TailwindDoc.vue
new file mode 100644
index 000000000..89ce1f529
--- /dev/null
+++ b/doc/treetable/theming/TailwindDoc.vue
@@ -0,0 +1,201 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
+            <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
+        </p>
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <DocSectionCode :code="code2" :service="['NodeService']" embedded />
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code1: {
+                basic: `
+export default {
+    treetable: {
+        root: ({ props }) => ({
+            class: [
+                'relative',
+                {
+                    'flex flex-col h-full': props.scrollHeight === 'flex'
+                }
+            ]
+        }),
+        loadingoverlay: {
+            class: [
+                'fixed w-full h-full t-0 l-0 bg-gray-100/40',
+                'transition duration-200',
+                'absolute flex items-center justify-center z-2',
+                'dark:bg-gray-950/40' // Dark Mode
+            ]
+        },
+        loadingicon: 'w-8 h-8',
+        header: {
+            class: [
+                'bg-slate-50 text-slate-700 border border-x-0 border-t-0 border-gray-300 p-4 font-bold',
+                'dark:bg-gray-900 dark:text-white/70 dark:border-blue-900/40' // Dark Mode
+            ]
+        },
+        wrapper: ({ props }) => ({
+            class: [
+                {
+                    'relative overflow-auto': props.scrollable,
+                    'overflow-x-auto': props.resizableColumns
+                }
+            ]
+        }),
+        footer: {
+            class: [
+                'bg-slate-50 text-slate-700 border border-x-0 border-t-0 border-gray-300 p-4 font-bold',
+                'dark:bg-gray-900 dark:text-white/70 dark:border-blue-900/40' // Dark Mode
+            ]
+        },
+        table: 'border-collapse table-fixed w-full',
+        thead: ({ props }) => ({
+            class: [
+                {
+                    'block sticky top-0 z-[1]': props.scrollable
+                }
+            ]
+        }),
+        tbody: ({ props }) => ({
+            class: [
+                {
+                    block: props.scrollable
+                }
+            ]
+        }),
+        tfoot: ({ props }) => ({
+            class: [
+                {
+                    block: props.scrollable
+                }
+            ]
+        }),
+        headerrow: ({ props }) => ({
+            class: [
+                {
+                    'flex flex-nowrap w-full': props.scrollable
+                }
+            ]
+        }),
+        row: ({ context }) => ({
+            class: [
+                'transition duration-200',
+                'focus:outline focus:outline-[0.15rem] focus:outline-blue-200 focus:outline-offset-[-0.15rem]', // Focus
+                context.selected ? 'bg-blue-50 text-blue-700 dark:bg-blue-300 dark:text-white/80' : 'bg-white text-gray-600 dark:bg-gray-900 dark:text-white/80',
+                {
+                    'hover:bg-gray-300/20 hover:text-gray-600 dark:hover:bg-gray-950': context.selectable && !context.selected, // Hover
+                    'flex flex-nowrap w-full': context.scrollable
+                }
+            ]
+        }),
+        column: {
+            headercell: ({ context }) => ({
+                class: [
+                    'text-left border-gray-300 border font-bold',
+                    'transition duration-200',
+                    context.sorted ? 'bg-blue-50 text-blue-700' : 'bg-slate-50',
+                    context?.size === 'small' ? 'p-2' : context?.size === 'large' ? 'p-5' : 'p-4', // Size
+                    'dark:border-blue-900/40 dark:text-white/80 dark:bg-gray-900', //Dark Mode
+                    {
+                        'flex flex-1 items-center': context.scrollable,
+                        'flex-initial shrink-0': context.scrollable && context.scrollDirection === 'both' && !context.frozen,
+                        'sticky z-[1]': context.scrollable && context.scrollDirection === 'both' && context.frozen,
+                        'border-x-0 border-l-0 border-t-0': !context.showGridlines,
+                        'overflow-hidden relative bg-clip-padding': context.resizable && !context.frozen
+                    }
+                ]
+            }),
+            bodycell: ({ context }) => ({
+                class: [
+                    'text-left border-gray-300 border',
+                    'transition duration-200',
+                    context?.size === 'small' ? 'p-2' : context?.size === 'large' ? 'p-5' : 'p-4', // Size
+                    'dark:border-blue-900/40', //Dark Mode
+                    {
+                        'cursor-pointer': context.selectable,
+                        'flex flex-1 items-center': context.scrollable,
+                        'flex-initial shrink-0': context.scrollable && context.scrollDirection === 'both' && !context.frozen,
+                        sticky: context.scrollable && context.scrollDirection === 'both' && context.frozen,
+                        'border-x-0 border-l-0': !context.showGridlines
+                    }
+                ]
+            }),
+            rowtoggler: ({ context }) => ({
+                class: [
+                    'relative inline-flex items-center justify-center align-center cursor-pointer select-none overflow-hidden bg-transparent',
+                    'w-8 h-8 border-0 rounded mr-0.5',
+                    context.selected ? 'text-blue-700' : 'text-gray-500',
+                    'dark:text-white/70' //Dark Mode
+                ]
+            }),
+            sorticon: ({ context }) => ({
+                class: ['ml-2', context.sorted ? 'text-blue-700 dark:text-white/80' : 'text-slate-700 dark:text-white/70']
+            }),
+            sortbadge: {
+                class: [
+                    'h-[1.143rem] min-w-[1.143rem] leading-[1.143rem] text-blue-700 bg-blue-50 ml-2 rounded-[50%]',
+                    'dark:text-white/80 dark:bg-blue-500/40' // Dark Mode
+                ]
+            },
+            columnresizer: 'block absolute top-0 right-0 m-0 w-2 h-full p-0 cursor-col-resize border border-transparent',
+            checkboxwrapper: {
+                class: ['cursor-pointer inline-flex relative select-none align-bottom', 'w-6 h-6 mr-2']
+            },
+            checkbox: ({ context }) => ({
+                class: [
+                    'flex items-center justify-center',
+                    'border-2 w-6 h-6 text-gray-600 rounded-lg transition-colors duration-200',
+                    context.checked ? 'border-blue-500 bg-blue-500 dark:border-blue-400 dark:bg-blue-400' : 'border-gray-300 bg-white dark:border-blue-900/40 dark:bg-gray-900',
+                    {
+                        'hover:border-blue-500 dark:hover:border-blue-400 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]': !context.disabled
+                    }
+                ]
+            }),
+            checkboxicon: ({ context }) => ({
+                class: [
+                    'w-4 h-4 transition-all duration-200 text-base dark:text-gray-900',
+                    {
+                        'text-white': context.checked
+                    }
+                ]
+            })
+        },
+        resizehelper: 'absolute hidden w-px z-10 bg-blue-500 dark:bg-blue-300'
+    }
+}
+`
+            },
+            code2: {
+                composition: `
+<template>
+    <div class="card">
+        <TreeTable :value="nodes">
+            <Column field="name" header="Name" sortable expander></Column>
+            <Column field="size" header="Size" sortable></Column>
+            <Column field="type" header="Type" sortable></Column>
+        </TreeTable>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { NodeService } from '@/service/NodeService';
+
+onMounted(() => {
+    NodeService.getTreeTableNodes().then((data) => (nodes.value = data));
+});
+
+const nodes = ref();
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/treetable/theming/UnstyledDoc.vue b/doc/treetable/theming/UnstyledDoc.vue
deleted file mode 100644
index 4ae328438..000000000
--- a/doc/treetable/theming/UnstyledDoc.vue
+++ /dev/null
@@ -1,66 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
-    </DocSectionText>
-    <DocSectionCode :code="code" :service="['NodeService']" embedded />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                composition: `
-<template>
-    <div class="card">
-        <TreeTable :value="nodes">
-            <Column field="name" header="Name" sortable expander></Column>
-            <Column field="size" header="Size" sortable></Column>
-            <Column field="type" header="Type" sortable></Column>
-        </TreeTable>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-import { NodeService } from '@/service/NodeService';
-
-onMounted(() => {
-    NodeService.getTreeTableNodes().then((data) => (nodes.value = data));
-});
-
-const nodes = ref();
-<\/script>`,
-                data: `
-{
-    key: '0',
-    label: 'Documents',
-    data: 'Documents Folder',
-    icon: 'pi pi-fw pi-inbox',
-    children: [
-        {
-            key: '0-0',
-            label: 'Work',
-            data: 'Work Folder',
-            icon: 'pi pi-fw pi-cog',
-            children: [
-                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
-                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
-            ]
-        },
-        {
-            key: '0-1',
-            label: 'Home',
-            data: 'Home Folder',
-            icon: 'pi pi-fw pi-home',
-            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
-        }
-    ]
-},
-...
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/treetable/theming/index.vue b/doc/treetable/theming/index.vue
index ecd8c45ce..15f13fdc6 100644
--- a/doc/treetable/theming/index.vue
+++ b/doc/treetable/theming/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import StyledDoc from './StyledDoc.vue';
-import UnstyledDoc from './UnstyledDoc.vue';
+import TailwindDoc from './TailwindDoc.vue';
 
 export default {
     data() {
@@ -24,7 +24,14 @@ export default {
                 {
                     id: 'unstyled',
                     label: 'Unstyled',
-                    component: UnstyledDoc
+                    description: 'Theming is implemented with the pass through properties in unstyled mode.',
+                    children: [
+                        {
+                            id: 'tailwind',
+                            label: 'Tailwind',
+                            component: TailwindDoc
+                        }
+                    ]
                 }
             ]
         };
diff --git a/doc/tristatecheckbox/theming/TailwindDoc.vue b/doc/tristatecheckbox/theming/TailwindDoc.vue
new file mode 100644
index 000000000..ed9ac701b
--- /dev/null
+++ b/doc/tristatecheckbox/theming/TailwindDoc.vue
@@ -0,0 +1,60 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            PrimeVue offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the
+            <PrimeVueNuxtLink to="/tailwind">Tailwind Customization</PrimeVueNuxtLink> section for an example.
+        </p>
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+        <p>A playground sample with the pre-built Tailwind theme.</p>
+        <DocSectionCode :code="code2" embedded />
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code1: {
+                basic: `
+export default {
+    tristatecheckbox: {
+        root: {
+            class: ['cursor-pointer inline-flex relative select-none align-bottom', 'w-6 h-6']
+        },
+        checkbox: ({ props }) => ({
+            class: [
+                'flex items-center justify-center',
+                'border-2 w-6 h-6 rounded-lg transition-colors duration-200',
+                {
+                    'border-blue-500 bg-blue-500 text-white dark:border-blue-400 dark:bg-blue-400': props.modelValue || !props.modelValue,
+                    'border-gray-300 text-gray-600 bg-white dark:border-blue-900/40 dark:bg-gray-900': props.modelValue == null
+                },
+                {
+                    'hover:border-blue-500 dark:hover:border-blue-400 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]': !props.disabled,
+                    'cursor-default opacity-60': props.disabled
+                }
+            ]
+        })
+    }
+}
+`
+            },
+            code2: {
+                composition: `
+<template>
+    <div class="card flex flex-col items-center">
+        <TriStateCheckbox v-model="value" />
+        <label for="checkbox" class="text-gray-700 dark:text-white/80 mt-1">{{ value == null ? 'null' : value }}</label>
+    </div>  
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref(null);
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/tristatecheckbox/theming/UnstyledDoc.vue b/doc/tristatecheckbox/theming/UnstyledDoc.vue
deleted file mode 100644
index 23a4183c3..000000000
--- a/doc/tristatecheckbox/theming/UnstyledDoc.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
-    </DocSectionText>
-    <DocSectionCode :code="code" embedded />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                composition: `
-<template>
-    <div class="card flex flex-col items-center">
-        <TriStateCheckbox v-model="value" />
-        <label for="checkbox" class="text-gray-700 dark:text-white/80 mt-1">{{ value == null ? 'null' : value }}</label>
-    </div>  
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-const value = ref(null);
-<\/script>`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/tristatecheckbox/theming/index.vue b/doc/tristatecheckbox/theming/index.vue
index 47ae356ef..8334a0866 100644
--- a/doc/tristatecheckbox/theming/index.vue
+++ b/doc/tristatecheckbox/theming/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import StyledDoc from './StyledDoc.vue';
-import UnstyledDoc from './UnstyledDoc.vue';
+import TailwindDoc from './TailwindDoc.vue';
 
 export default {
     data() {
@@ -24,7 +24,14 @@ export default {
                 {
                     id: 'unstyled',
                     label: 'Unstyled',
-                    component: UnstyledDoc
+                    description: 'Theming is implemented with the pass through properties in unstyled mode.',
+                    children: [
+                        {
+                            id: 'tailwind',
+                            label: 'Tailwind',
+                            component: TailwindDoc
+                        }
+                    ]
                 }
             ]
         };