Primevue and Storybook

[rependa]

I've been trying to add Primevue with Tailwind to display in Storybook. I can get Tailwind styles to display correctly in Storybook and I can get Primevue styles to display correctly in Storybook, but once I follow the Primevue instructions for integrating Tailwind into Primevue via {unstyled: true, pt: Tailwind}, while my localhost displays the minimaly styled components correctly, the same component in Storybook renders without the tailwind classes applied onto the elements. If I inspect the element on my localhost and copy all it's classes and paste them into the same component displayed in storybook, the element looks the same - so I know the stylesheet referenced in preview.js is correct.

Any ideas why the classes are being stripped out?

Button element when viewed through a page on my localhost:
<button data-v-e17ea971="" type="button" aria-label="prime button" class="items-center cursor-pointer inline-flex overflow-hidden relative select-none text-center align-bottom h-full transition duration-200 ease-in-out focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_2px_rgba(255,255,255,1),0_0_0_4px_rgba(157,193,251,1),0_1px_2px_0_rgba(0,0,0,1)] dark:focus:shadow-[0_0_0_2px_rgba(28,33,39,1),0_0_0_4px_rgba(147,197,253,0.7),0_1px_2px_0_rgba(0,0,0,0)] text-white bg-blue-500 border border-blue-500 hover:bg-blue-600 hover:border-blue-600 rounded-md px-4 py-3 text-base" data-pc-name="button" data-pc-section="root" data-pd-ripple="true"><!----><span class="flex-1 duration-200 font-bold" data-pc-section="label">prime button</span><!----></button>

same button element in Storybook:
<button data-v-e17ea971="" class="p-button p-component" type="button" aria-label="prime button" data-pc-name="button" data-pc-section="root" data-pd-ripple="true"><!----><span class="p-button-label" data-pc-section="label">prime button</span><!----></button>

[cagataycivici]

Have you configured Tailwind's built-in purgecss to scan PrimeVue components as well;

https://primevue.org/tailwind/#setup

[rependa]

Yes:
In tailwind.config.js:
...

content: [
"./index.html",
".src/**/*.{vue,js},
"./node_modules/primevue/**/*.{vue,js,ts,jsx,tsx}"
]

...

[jdassin]

Hello @rependa, if you encounter any concerns or need assistance with the Storybook & Vue library, please check out https://github.com/storybook-vue. It's primarily dedicated to Vue and managed by the fantastic @chakAs3, who is also a Storybook maintainer and will surely assist you promptly.