[PrimeReact] Styles problems with NextJS + Tailwind

[SoyDiego]

Hi, It's my first time using PrimeReact with NextJS and Tailwind and I have problem in my styles and I don't understand why.
Here you can see a Stackblitz with the problem: https://stackblitz.com/edit/stackblitz-starters-7lccbl?file=app%2Fpage.tsx

I realized if you "play" with the styles and hide some of them you can "repair" a little bit but broke others. I think the styles are being stepped

Problem 1 (Opening Stackblitz)

If I open in Chrome (left side) works perfectly. But If I open in Firefox (right side) it's broken. (Button "Volver atrás", calendar input, dividers, and button at the bottom)

Problem 2 (Opening Netlify)

I uploaded almost the same code to Netlify to check it and in Chrome and Firefox it's broken.
This is the link: https://lighthearted-genie-243620.netlify.app/pages/salvaments.

Problem 3 (Opening VERCEL)

Here you can see the problem too: https://estadisticas-guardavidas.vercel.app/pages/salvaments

Hope someone knows If i'm doing something wrong or it's a bug.

Thanks!

[melloware]

I don't know why but it looks like Firefox and Chrome are interpreting the layers differently or ordering of @layer primreact and @layer tailwind

[SoyDiego]

I don't know why but it looks like Firefox and Chrome are interpreting the layers differently or ordering of @layer primreact and @layer tailwind

Yep, but if you check the Netlify example, in both cases it's broken too, Chrome, Firefox.

[melloware]

OK so i wouldn't trust StackBlitz then sometimes it can be funky but a real running app is the real test. My guess is its some kind of ordering thing when your app gets bundled its like its bundling the CSS in the wrong order?

[SoyDiego]

OK so i wouldn't trust StackBlitz then sometimes it can be funky but a real running app is the real test. My guess is its some kind of ordering thing when your app gets bundled its like its bundling the CSS in the wrong order?

Maybe yes but I tried moving the order of the CSS layers and always the same result.
Here you have another example with VERCEL: https://estadisticas-guardavidas.vercel.app/pages/salvaments (I added to the first message)

[melloware]

Can you add all this detail and your samples to this ticket: primefaces/primereact#4987

[SoyDiego]

Done bro! primefaces/primereact#4987 (comment)

[SoyDiego]

I updated the first post and I left a gif, maybe can be useful, I don't know @melloware

[SoyDiego]

I found this possible solution: https://soydiego.notion.site/PrimeReact-How-to-fix-styles-NextJS-Tailwind-92bec3eb91594388a7be67d922460eaf

[bloodykheeng]

This solution is not working in next 15

[melloware]

@bloodykheeng see this solution for Next 15 primefaces/primereact#5291 (comment)

[bloodykheeng]

@melloware ive tried setting up primereact with tailwind in next 15 as the docs say but seems tailwind is taking over most of prime react styles

[melloware]

Yes did you read that comment a user posted how it's different for 15 and how to make it work.