From fa2d2f183aa9df0124100eae83522c42239be5bf Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Mon, 27 May 2024 22:18:44 +0300
Subject: [PATCH] Initiate new TW doc

---
 assets/menu/menu.json          |  13 +++-
 doc/tailwind/AnimationsDoc.vue |   0
 doc/tailwind/ExtensionsDoc.vue | 112 +++++++++++++++++++++++++++++++++
 doc/tailwind/OverviewDoc.vue   |  15 +++++
 doc/tailwind/PluginDoc.vue     |  36 +++++++++++
 doc/tailwind/PresetsDoc.vue    |  15 +++++
 doc/tailwind/SamplesDoc.vue    |  36 +++++++++++
 pages/tailwind/index.vue       |  58 +++++++++++++++++
 8 files changed, 283 insertions(+), 2 deletions(-)
 create mode 100644 doc/tailwind/AnimationsDoc.vue
 create mode 100644 doc/tailwind/ExtensionsDoc.vue
 create mode 100644 doc/tailwind/OverviewDoc.vue
 create mode 100644 doc/tailwind/PluginDoc.vue
 create mode 100644 doc/tailwind/PresetsDoc.vue
 create mode 100644 doc/tailwind/SamplesDoc.vue
 create mode 100644 pages/tailwind/index.vue

diff --git a/assets/menu/menu.json b/assets/menu/menu.json
index f68a0486c..c1e76acbc 100644
--- a/assets/menu/menu.json
+++ b/assets/menu/menu.json
@@ -499,9 +499,18 @@
             "to": "/passthrough"
         },
         {
-            "name": "Tailwind Presets",
+            "name": "Tailwind CSS",
             "icon": "pi pi-heart",
-            "href": "https://tailwind.primevue.org/"
+            "children": [
+                {
+                    "name": "Integration",
+                    "to": "/tailwind"
+                },
+                {
+                    "name": "Presets",
+                    "href": "https://tailwind.primevue.org"
+                }
+            ]
         },
         {
             "name": "Figma UI Kit",
diff --git a/doc/tailwind/AnimationsDoc.vue b/doc/tailwind/AnimationsDoc.vue
new file mode 100644
index 000000000..e69de29bb
diff --git a/doc/tailwind/ExtensionsDoc.vue b/doc/tailwind/ExtensionsDoc.vue
new file mode 100644
index 000000000..1eefd5031
--- /dev/null
+++ b/doc/tailwind/ExtensionsDoc.vue
@@ -0,0 +1,112 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>The plugin extends the default configuration with a new set of utilities. All variants and breakpoints are supported e.g. <i>dark:sm:hover:bg-primary</i>.</p>
+        <h3>Color Palette</h3>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Class</th>
+                        <th>Property</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>primary-[50-950]</td>
+                        <td>Primary color palette.</td>
+                    </tr>
+                    <tr>
+                        <td>surface-[0-950]</td>
+                        <td>Surface color palette.</td>
+                    </tr>
+                    <tr>
+                        <td>primary</td>
+                        <td>Default primary color.</td>
+                    </tr>
+                    <tr>
+                        <td>primary-contrast</td>
+                        <td>Default primary contrast color.</td>
+                    </tr>
+                    <tr>
+                        <td>primary-emphasis</td>
+                        <td>Default primary emphasis color.</td>
+                    </tr>
+                    <tr>
+                        <td>border-surface</td>
+                        <td>Default primary emphasis color.</td>
+                    </tr>
+                    <tr>
+                        <td>bg-emphasis</td>
+                        <td>Emphasis background e.g. hovered element.</td>
+                    </tr>
+                    <tr>
+                        <td>bg-highlight</td>
+                        <td>Highlight background.</td>
+                    </tr>
+                    <tr>
+                        <td>bg-highlight-emphasis</td>
+                        <td>Highlight background with emphasis.</td>
+                    </tr>
+                    <tr>
+                        <td>rounded-border</td>
+                        <td>Border radius.</td>
+                    </tr>
+                    <tr>
+                        <td>text-color</td>
+                        <td>Text color with emphasis.</td>
+                    </tr>
+                    <tr>
+                        <td>text-color-emphasis</td>
+                        <td>Default primary emphasis color.</td>
+                    </tr>
+                    <tr>
+                        <td>text-muted-color</td>
+                        <td>Secondary text color.</td>
+                    </tr>
+                    <tr>
+                        <td>text-muted-color-emphasis</td>
+                        <td>Secondary text color with emphasis.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+        <div class="card">
+            <ul class="p-0 m-0 list-none flex sm:flex-col gap-4 flex-wrap sm:flex-nowrap">
+                <li v-for="(color, i) of colors" :key="i" class="flex-auto" style="min-width: 6rem">
+                    <span class="font-medium capitalize block mb-2 text-center sm:text-left">{{ color }}</span>
+                    <div class="flex gap-4 flex-auto flex-col sm:flex-row">
+                        <div v-for="(shade, j) of shades" :key="shade" :class="['flex flex-col items-center gap-1 flex-1', { invisible: color === 'primary' && shade === 0 }]">
+                            <div class="rounded h-8 w-full" :style="`background-color: var(--p-${color}-${shades[j]})`"></div>
+                            <span class="text-sm text-surface-500 dark:text-surface-400 font-medium">{{ shades[j] }}</span>
+                        </div>
+                    </div>
+                </li>
+            </ul>
+        </div>
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            shades: [0, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950],
+            colors: ['primary', 'surface'],
+            code1: {
+                basic: `
+npm i tailwindcss-primeui
+`
+            },
+            code2: {
+                basic: `
+// tailwind.config.js
+module.exports = {
+    // ...
+    plugins: [require('tailwindcss-primeui')]
+};
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/tailwind/OverviewDoc.vue b/doc/tailwind/OverviewDoc.vue
new file mode 100644
index 000000000..6386c730f
--- /dev/null
+++ b/doc/tailwind/OverviewDoc.vue
@@ -0,0 +1,15 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            Tailwind CSS is a popular CSS framework with a utility-first approach. The core provides flexible CSS classes with predefined CSS rules to build your own UI elements. For example, instead of an opinionated <i>btn</i> class as in
+            Bootstrap, Tailwind offers primitive classes like <i>bg-blue-500</i>, <i>rounded</i> and <i>p-4</i> to apply a button. A set of reusable classes can also be grouped as a Tailwind CSS component and there are even a couple of libraries that
+            take this approach to build components for Tailwind.
+        </p>
+        <p>
+            Tailwind is an outstanding library, however it lacks a true comprehensive UI suite specifically when combined with Vue.js, this is where PrimeVue comes in by providing a wide range of highly accessible and feature rich UI component
+            library. The core of PrimeVue does not depend on Tailwind CSS, instead we provide the necessary integration points such as the primeui tailwind plugin and the presets for the unstyled mode.
+        </p>
+    </DocSectionText>
+</template>
+
+<script></script>
diff --git a/doc/tailwind/PluginDoc.vue b/doc/tailwind/PluginDoc.vue
new file mode 100644
index 000000000..132cb4cb0
--- /dev/null
+++ b/doc/tailwind/PluginDoc.vue
@@ -0,0 +1,36 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            The <a href="https://www.npmjs.com/package/tailwindcss-primeui" target="_blank" rel="noopener noreferrer">tailwindcss-primeui</a> is an official plugin by PrimeTek to provide first class integration between a Prime UI library like
+            PrimeVue and Tailwind CSS. It is designed to work both in styled and unstyled modes. In styled mode, for instance the semantic colors such as primary and surfaces are provided as Tailwind utilities e.g. <i>bg-primary</i>,
+            <i>text-surface-500</i>, <i>text-muted-color</i>.
+        </p>
+        <p>Plugin is available on npm.</p>
+        <DocSectionCode :code="code1" hideToggleCode importCode hideStackBlitz />
+        <p>After installation, configure the plugin at your tailwind configuration file.</p>
+        <DocSectionCode :code="code2" hideToggleCode importCode hideStackBlitz />
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code1: {
+                basic: `
+npm i tailwindcss-primeui
+`
+            },
+            code2: {
+                basic: `
+// tailwind.config.js
+module.exports = {
+    // ...
+    plugins: [require('tailwindcss-primeui')]
+};
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/tailwind/PresetsDoc.vue b/doc/tailwind/PresetsDoc.vue
new file mode 100644
index 000000000..6e30fa344
--- /dev/null
+++ b/doc/tailwind/PresetsDoc.vue
@@ -0,0 +1,15 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            In unstyled mode of PrimeVue, default styling elements like design tokens and css classes are turned off so that you have full control over the component styling with pass-through properties. This feature is quite useful when you'd like
+            to build your own UI library based on a custom design by wrapping PrimeVue components or simply utilitze Tailwind CSS to style the PrimeVue components.
+        </p>
+        <p>
+            The unstyled mode also use the <i>preset</i> concept just like the styled mode to define a theme. In styled mode a preset is a set of design tokens implemented with CSS variables whereas in unstyled mode a preset is a Pass-Through
+            configuration object to inject Tailwind CSS classes into components. If you prefer to ignore the default styled mode theming api and use Tailwind CSS to style the PrimeVue UI components instead, learn more at the standalone
+            <a href="https://tailwind.primevue.org/" target="_blank" rel="noopener noreferrer">Tailwind CSS Presets</a> project website.
+        </p>
+    </DocSectionText>
+</template>
+
+<script></script>
diff --git a/doc/tailwind/SamplesDoc.vue b/doc/tailwind/SamplesDoc.vue
new file mode 100644
index 000000000..132cb4cb0
--- /dev/null
+++ b/doc/tailwind/SamplesDoc.vue
@@ -0,0 +1,36 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            The <a href="https://www.npmjs.com/package/tailwindcss-primeui" target="_blank" rel="noopener noreferrer">tailwindcss-primeui</a> is an official plugin by PrimeTek to provide first class integration between a Prime UI library like
+            PrimeVue and Tailwind CSS. It is designed to work both in styled and unstyled modes. In styled mode, for instance the semantic colors such as primary and surfaces are provided as Tailwind utilities e.g. <i>bg-primary</i>,
+            <i>text-surface-500</i>, <i>text-muted-color</i>.
+        </p>
+        <p>Plugin is available on npm.</p>
+        <DocSectionCode :code="code1" hideToggleCode importCode hideStackBlitz />
+        <p>After installation, configure the plugin at your tailwind configuration file.</p>
+        <DocSectionCode :code="code2" hideToggleCode importCode hideStackBlitz />
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code1: {
+                basic: `
+npm i tailwindcss-primeui
+`
+            },
+            code2: {
+                basic: `
+// tailwind.config.js
+module.exports = {
+    // ...
+    plugins: [require('tailwindcss-primeui')]
+};
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/pages/tailwind/index.vue b/pages/tailwind/index.vue
new file mode 100644
index 000000000..1e2880138
--- /dev/null
+++ b/pages/tailwind/index.vue
@@ -0,0 +1,58 @@
+<template>
+    <Head>
+        <Title>Tailwind CSS - PrimeVue</Title>
+        <Meta name="description" content="Integration between PrimeVue and Tailwind CSS" />
+    </Head>
+    <div class="doc">
+        <div class="doc-main">
+            <div class="doc-intro">
+                <h1>Tailwind CSS</h1>
+                <p>Integration between PrimeVue and Tailwind CSS.</p>
+            </div>
+            <DocSections :docs="docs" />
+        </div>
+        <DocSectionNav :docs="docs" />
+    </div>
+</template>
+
+<script>
+import ExtensionsDoc from '@/doc/tailwind/ExtensionsDoc.vue';
+import OverviewDoc from '@/doc/tailwind/OverviewDoc.vue';
+import PluginDoc from '@/doc/tailwind/PluginDoc.vue';
+import PresetsDoc from '@/doc/tailwind/PresetsDoc.vue';
+import SamplesDoc from '@/doc/tailwind/SamplesDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'overview',
+                    label: 'Overview',
+                    component: OverviewDoc
+                },
+                {
+                    id: 'presets',
+                    label: 'Presets',
+                    component: PresetsDoc
+                },
+                {
+                    id: 'plugin',
+                    label: 'PluginDoc',
+                    component: PluginDoc
+                },
+                {
+                    id: 'extensions',
+                    label: 'Extensions',
+                    component: ExtensionsDoc
+                },
+                {
+                    id: 'samples',
+                    label: 'Samples',
+                    component: SamplesDoc
+                }
+            ]
+        };
+    }
+};
+</script>