I don't know why, NextJS is changing the order of the CSS Layers. I found a workaround to solve it. Maybe is not the best solution but I hope someone can find a better way. You can find more info here: https://github.com/vercel/next.js/issues/16630
Styles are broken.
If you inspect wit the browser (in my case Firefox, you can see the order of the layers) and PrimeReact is first (this is the problem)
And in the second file you have Tailwind:
Add in your layout.tsx
the next code:
<head>
<script
dangerouslySetInnerHTML={{
__html: `
const style = document.createElement('style')
style.innerHTML = '@layer tailwind-base, primereact, tailwind-utilities;'
style.setAttribute('type', 'text/css')
document.querySelector('head').prepend(style)
`,
}}
/>
</head>
The most important here is specify the order of the layers
. In our case @layer tailwind-base, primereact, tailwind-utilities;
.
This is forcing the browser to follow the order. And also delete unnecessary CSS. In my case I had another style in my imports (primereact.min.css
)
Doing this, you will see the styles are perfectly and in the first code, you will see the line that we added:
If you remove a space between tailwind-base
and tailwind-utilities
and then remove the primereact.min.css
all is working too.