From 795b963f88f0e29b59bb34a1e263b597baaffcd8 Mon Sep 17 00:00:00 2001 From: Cagatay Civici Date: Sun, 10 Sep 2023 02:25:16 +0300 Subject: [PATCH] Updated docs for Tailwind --- assets/data/news.json | 4 +- assets/menu/menu.json | 10 ++-- assets/styles/layout/_doc.scss | 6 +-- doc/passthrough/BasicDoc.vue | 2 +- doc/tailwind/CustomizationDoc.vue | 80 ++++++++++++++++++------------- doc/tailwind/ExampleDoc.vue | 17 +------ doc/tailwind/SetupDoc.vue | 10 ++-- layouts/AppMenuItem.vue | 18 +++---- pages/tailwind/index.vue | 6 ++- 9 files changed, 82 insertions(+), 71 deletions(-) diff --git a/assets/data/news.json b/assets/data/news.json index eea34a3ab..5fd7ba761 100644 --- a/assets/data/news.json +++ b/assets/data/news.json @@ -1,6 +1,6 @@ { - "id": 42, - "content": "Introducing Tailwind CSS Support", + "id": 43, + "content": "Building Design Systems with Tailwind", "linkText": "Learn More", "linkHref": "https://primevue.org/tailwind", "backgroundStyle": "background-color:#4f8ff7", diff --git a/assets/menu/menu.json b/assets/menu/menu.json index 8baf2cc6f..3a8ee8ee4 100644 --- a/assets/menu/menu.json +++ b/assets/menu/menu.json @@ -455,10 +455,6 @@ "name": "Overview", "to": "/unstyled" }, - { - "name": "Tailwind", - "to": "/tailwind" - }, { "name": "Bootstrap", "to": "/bootstrap" @@ -476,6 +472,12 @@ "icon": "pi pi-directions", "to": "/passthrough" }, + { + "name": "Tailwind", + "icon": "pi pi-heart", + "to": "/tailwind", + "badge": "NEW" + }, { "name": "Figma UI Kit", "icon": "pi pi-pencil", diff --git a/assets/styles/layout/_doc.scss b/assets/styles/layout/_doc.scss index 0edb4414c..f1f3b17ba 100644 --- a/assets/styles/layout/_doc.scss +++ b/assets/styles/layout/_doc.scss @@ -66,8 +66,8 @@ margin-bottom: 2rem; p { - font-size: 1.25rem; - color: var(--surface-800); + font-size: 1.125rem; + color: var(--surface-900); } } @@ -98,7 +98,7 @@ .doc-section-description { > p { font-size: 1.125rem; - color: var(--surface-800); + color: var(--surface-900); i { border-radius: 6px; diff --git a/doc/passthrough/BasicDoc.vue b/doc/passthrough/BasicDoc.vue index 1c5d8ccbb..6aacf6e17 100644 --- a/doc/passthrough/BasicDoc.vue +++ b/doc/passthrough/BasicDoc.vue @@ -7,7 +7,7 @@

Most common usage of pt is styling and customization. The class and style properties support the exact syntax of the corresponding - Vue bindings like arrays, objects and conditionals. example below styles a Panel component with PrimeFlex CSS library. + Vue bindings like arrays, objects and conditionals. Example below styles a Panel component with PrimeFlex CSS library.

diff --git a/doc/tailwind/CustomizationDoc.vue b/doc/tailwind/CustomizationDoc.vue index 023ab3a99..fed3073a7 100644 --- a/doc/tailwind/CustomizationDoc.vue +++ b/doc/tailwind/CustomizationDoc.vue @@ -1,11 +1,16 @@ @@ -15,36 +20,47 @@ 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 + basic: `import {createApp} from "vue"; +import PrimeVue from "primevue/config"; +import Tailwind from "primevue/passthrough/tailwind"; + +const app = createApp(App); + +//My Design System with Tailwind +const MyDesignSystem = { + 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 + } } -},` +} + +app.use(PrimeVue, { unstyled: true, pt: MyDesignSystem });` }, code2: { basic: `import {createApp} from "vue"; diff --git a/doc/tailwind/ExampleDoc.vue b/doc/tailwind/ExampleDoc.vue index 13871bcd2..daf1f7b67 100644 --- a/doc/tailwind/ExampleDoc.vue +++ b/doc/tailwind/ExampleDoc.vue @@ -1,21 +1,8 @@ - - diff --git a/doc/tailwind/SetupDoc.vue b/doc/tailwind/SetupDoc.vue index 092e0e8e7..795bdaa36 100644 --- a/doc/tailwind/SetupDoc.vue +++ b/doc/tailwind/SetupDoc.vue @@ -2,16 +2,16 @@

This section assumes that Tailwind is already available in your application, if not visit the Tailwind CSS framework guides like Vite or Nuxt for the installation. - The built-in default theme is basically a global pass through configuration that needs to be imported from primevue/passthrough/tailwind path and then defined during setup. - Since the theme is exclusive to unstyled mode, the unstyled setting is required in addition. + The built-in default theme is basically a global pass through preset that needs to be imported from primevue/passthrough/tailwind path and then defined during setup. Since the + theme is exclusive to unstyled mode, the unstyled setting is required in addition.

- Tailwind uses PurgeCSS internally to remove unused classes, since PrimeVue components are loaded from node_modules the content property at tailwind.config.js needs to be aware of PrimeVue, otherwise the classes utilized in - the theme will be removed as well. + Tailwind uses PurgeCSS internally to remove unused classes, as PrimeVue components are loaded from node_modules the content property at tailwind.config.js needs to be aware of PrimeVue, otherwise the classes utilized + in the theme will be removed as well.

-

Voilà 💚, you now have 90+ awesome Vue UI components styled with Tailwind that will work in harmony with the rest of your application.

+

Voilà 💚, you now have 90+ awesome Vue UI components styled with Tailwind that will work in harmony with the rest of your application. Time to customize it to bring in your own style with Tailwind.

 diff --git a/layouts/AppMenuItem.vue b/layouts/AppMenuItem.vue index d6763e849..819cf66b7 100644 --- a/layouts/AppMenuItem.vue +++ b/layouts/AppMenuItem.vue @@ -1,24 +1,26 @@