Add new TW docs

doc/configuration/ImportDoc.vue

@@ -13,7 +13,7 @@ export default {
                 basic: `import PrimeVue from 'primevue/config';
 const app = createApp(App);
 
-app.use(PrimeVue);`
+app.use(PrimeVue, { /* options */ });`
             }
         };
     }

doc/tailwind/CustomizationDoc.vue

@@ -0,0 +1,67 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>The built-in theme provides a strong base that can be extended further for your requirements. For customization, the pass through values need to be overriden. For instance, the panel component has the following default configuration.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    <p>
+        Let's assume the <i>title</i> section should be lighter and bigger. To begin with, clone the Tailwind theme to create your own, override the default values with your own utility classes and finally configure your own theme object as the
+        <i>pt</i> of PrimeVue.
+    </p>
+    <DocSectionCode :code="code2" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code1: {
+                basic: `panel: {
+    header: ({ props }) => ({
+        class: [
+            'flex items-center justify-between', // flex and alignments
+            'border border-gray-300 bg-gray-100 text-gray-700 rounded-tl-lg rounded-tr-lg', // borders and colors
+            'dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80', // Dark mode
+            { 'p-5': !props.toggleable, 'py-3 px-5': props.toggleable } // condition
+        ]
+    }),
+    title: {
+        class: ['leading-none font-bold']
+    },
+    toggler: {
+        class: [
+            'inline-flex items-center justify-center overflow-hidden relative no-underline', // alignments
+            'w-8 h-8 text-gray-600 border-0 bg-transparent rounded-full transition duration-200 ease-in-out', // widths, borders, and transitions
+            'hover:text-gray-900 hover:border-transparent hover:bg-gray-200 dark:hover:text-white/80 dark:hover:bg-gray-800/80 dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]', // hover
+            'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]' // focus
+        ]
+    },
+    togglerIcon: {
+        class: ['inline-block']
+    },
+    content: {
+        class: [
+            'p-5 border border-gray-300 bg-white text-gray-700 border-t-0 last:rounded-br-lg last:rounded-bl-lg',
+            'dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80' // Dark mode
+        ] // padding, borders, and colors
+    }
+},`
+            },
+            code2: {
+                basic: `import {createApp} from "vue";
+import PrimeVue from "primevue/config";
+import Tailwind from "primevue/tailwind";
+
+const app = createApp(App);
+
+//Tailwind customization
+const CustomTailwindTheme = {...Tailwind};
+CustomTailwindTheme.panel.title = {
+    class: ['leading-none font-light text-2xl']
+}
+
+app.use(PrimeVue, { unstyled: true, pt: CustomTailwindTheme });`
+            }
+        };
+    }
+};
+</script>

doc/tailwind/ExampleDoc.vue

@@ -1,6 +1,9 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>As an example, Tailwind is used to style the <i>Button</i> and <i>Dialog</i> components of PrimeVue.</p>
+        <p>
+            The built-in theme is optional as Tailwind can easily be integrated with PrimeVue components in unstyled mode either using global setting or for a particular component only. Visit the <NuxtLink to="/unstyled">unstyled</NuxtLink> mode
+            documentation for getting started. As an example, Tailwind is used to style the <i>Button</i> and <i>Dialog</i> components of PrimeVue without the default theme.
+        </p>
     </DocSectionText>
     <div class="flex justify-content-center">
         <iframe class="w-full h-full" style="border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 2px; min-height: 800px" src="https://codesandbox.io/p/sandbox/unstyled-primevue-dialog-with-tailwind-css-2jp96n?embed=1" allowfullscreen></iframe>

doc/tailwind/SetupDoc.vue

@@ -1,9 +1,29 @@
 <template>
     <DocSectionText v-bind="$attrs">
         <p>
-            This section assumes that Tailwind is already available in your application, if not visit the Tailwind CSS <a href="https://tailwindcss.com/docs/installation/framework-guides">framework guides</a> for the installation. There is no
+            This section assumes that Tailwind is already available in your application, if not visit the Tailwind CSS <a href="https://tailwindcss.com/docs/installation/framework-guides">framework guides</a> like Vite or Nuxt for the installation.
-            specific configuration required at Tailwind for the PrimeVue integration.
+            The built-in default theme is basically a <PrimeVueNuxtLink to="/passthrough">global pass through</PrimeVueNuxtLink> configuration that needs to be imported from <i>primevue/tailwind</i> path and then defined during setup. Since the theme
+            is exclusive to unstyled mode, the <i>unstyled</i> setting is required in addition.
         </p>
-        <p>Tailwind can easily be integrated with PrimeVue components in unstyled mode either using global setting or for a particular component only. Visit the <NuxtLink to="/unstyled">unstyled</NuxtLink> mode documentation for getting started.</p>
+        <p>Voilà 💚, you now have 90+ awesome Vue UI components styled with Tailwind that will work in harmony with the rest of your application.</p>
     </DocSectionText>
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `import {createApp} from "vue";
+import PrimeVue from "primevue/config";
+import Tailwind from "primevue/tailwind";
+
+const app = createApp(App);
+
+app.use(PrimeVue, { unstyled: true, pt: Tailwind });`
+            }
+        };
+    }
+};
+</script>

pages/tailwind/index.vue

@@ -2,14 +2,14 @@
     <div>
         <Head>
             <Title>Tailwind - PrimeVue</Title>
-            <Meta name="description" content="Styling PrimeVue with Tailwind CSS." />
+            <Meta name="description" content="Tailwind UI Components for Vue" />
         </Head>
 
         <div class="doc">
             <div class="doc-main">
                 <div class="doc-intro">
                     <h1>Tailwind CSS</h1>
-                    <p>Tailwind is a popular utility-first CSS library that fits perfectly to the unstyled mode of PrimeVue.</p>
+                    <p>Tailwind is a popular utility-first CSS library that fits perfectly to the unstyled mode of PrimeVue. A built-in Tailwind theme is even available to get started in no time.</p>
                 </div>
                 <DocSections :docs="docs" />
             </div>
@@ -19,6 +19,8 @@
 </template>
 
 <script>
+import ApiDoc from '@/doc/tailwind/ApiDoc';
+import CustomizationDoc from '@/doc/tailwind/CustomizationDoc.vue';
 import ExampleDoc from '@/doc/tailwind/ExampleDoc';
 import SetupDoc from '@/doc/tailwind/SetupDoc';
 
@@ -31,10 +33,20 @@ export default {
                     label: 'Setup',
                     component: SetupDoc
                 },
+                {
+                    id: 'customization',
+                    label: 'Customization',
+                    component: CustomizationDoc
+                },
                 {
                     id: 'example',
                     label: 'Example',
                     component: ExampleDoc
+                },
+                {
+                    id: 'api',
+                    label: 'Theme API',
+                    component: ApiDoc
                 }
             ]
         };