PrimeVue + Tailwind: Seeking Best Practices for Unstyled/Hybrid Configuration in Vite

[e-bjorn]

Hello PrimeVue Team,

I’m considering PrimeVue for multiple projects and have a few questions about best practices for implementing a full/hybrid unstyled setup in a Vite SPA app. My goal is to integrate Tailwind CSS throughout the solution and ideally manage all styling from a single CSS file to streamline configuration.

The plan is to set up a custom library, where one package will expose a set of PrimeVue components and a plugin (primevue/config), and another package will handle themes, styles, and presets.

After reviewing the Tailwind integration documentation, I noticed that the recommended approach for hybrid styling uses Tailwind's @apply strategy. This method, however, seems to generate a relatively large CSS file due to the additional class sorting and processing. On the other hand, the PrimeBlocks documentation suggests using a “fully unstyled” approach with the pass-through API and a global preset, which adds some initial size to the JavaScript bundle but results in a smaller overall footprint when resources are combined.

I'm also considering creating a factory function that would apply presets individually for each component using the pass-through API, allowing configurations without setting them globally.

Given these options:

What would be the recommended approach for using Tailwind with PrimeVue in terms of performance and scalability?
Which of these configurations is likely to have the best support moving forward?
Lastly, I noticed that even when using "unstyled: true" or "theme: 'none'", base CSS styles are still included in the distribution. I found an open issue (#4918) regarding this and wondered if there are plans to address it in an upcoming release?

Thank you very much for your awesome work