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 PrimeOne Design is even available to get started in no time. In the upcoming iterations, PrimeVue will provide more presets to implement various design systems.
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 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, 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. Time to customize it to bring in your own style with Tailwind.
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.
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 usePassThrough documentation.
This example covers how to enable the default Tailwind based PrimeOne Design implementation and the customization options.