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 @@- The built-in theme implements the PrimeOne Design to provide a strong base that can be extended further for your requirements. For customization, the pass through values need to be overriden. The unstyled section of the theming - documentation for each component demonstrates the theme with an editable example. For instance, the panel component has the following default configuration. + The built-in preset is based on the PrimeOne Design and meant to serve as a template to implement your own design. For customization, the pass through values need to be overriden or defined from the ground up. The unstyled section of the + theming documentation for each component demonstrates the theme with an editable example. For the complete list visit the + Tailwind Preset.
+First approach is building everything from the ground up and consult the default preset to get hints about the implementation details. This technique is suggested when implementing your own design system.
Let's assume the title section should be lighter and bigger. For the merge configuration behavior, visit
+ Alternative way is overriding the opinionated PrimeOne theme with usePassThrough. This approach is suggested when you prefer to customize the default preset for your own requirements. For the merge configuration behavior, visit
+
- 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
This example covers how to enable the default Tailwind based PrimeOne Design implementation and the customization options.
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
- 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.
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.
+
+ The exclusive Tailwind integration of PrimeVue is a great choice for developers who want the flexibility of Tailwind with the convenience of a UI Component library. Tailwind simply fits perfectly to the unstyled mode of
+ PrimeVue to implement design systems. A built-in Tailwind theme based on