This section assumes that Tailwind is already available in your application, if not visit the Tailwind CSS framework guides like Vite for the installation and make
sure to apply the CSS layer configuration above when including the styles of Tailwind 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.
Next step is enabling the unstyled option to remove the default style classes from the components and adding an empty pt so that they can be styled with Tailwind in the next section. Note that if you run your
application at this stage, functionality and accessibility of the components will still work but everything will be transparent as there is no style.
At the final step, component styles are provided via a pass through configuration that utilizes Tailwind CSS. The default preset of each component is available at the Tailwind part under theming section of each component so you'll
able to copy paste instead of starting from scratch. Example below styles, inputtext and panel components;
Voilà 💚, you now have access to 80+ awesome Vue UI components styled with Tailwind that will work in harmony with the rest of your application.