CSS Loading Issue with Prime Version 10.0.3

[meriemMat]

CSS Loading Issue with Prime Version 10.0.3

i am having this ui shwoing quiqly then the css is correctly set :

Any idea about the cause?

[melloware]

@meriemMat try 10.0.5 which was just released but most likely its the order of your CSS imports in your chosen bundler such as NetxJS etc. PrimeReact 10 added a new @layer to its CSS to reduce its importance.

[github-actions]

Please fork the CodeSandbox project or Stackblitz project and create a case demonstrating your bug report. This issue will be closed if no activities in 20 days.

[zucchiniEvader]

I hava the same issue with 10.0.5:

[melloware]

See this: https://soydiego.notion.site/PrimeReact-How-to-fix-styles-NextJS-Tailwind-92bec3eb91594388a7be67d922460eaf

[zucchiniEvader]

See this: https://soydiego.notion.site/PrimeReact-How-to-fix-styles-NextJS-Tailwind-92bec3eb91594388a7be67d922460eaf

Only when the page is loading does it appear as shown in the picture, and then it immediately displays correctly.
So, the doc doesn't work for me.

[melloware]

@SoyDiego ?

[SoyDiego]

Share a Stackblitz to see if we can help @aholeye @meriemMat

[zucchiniEvader]

@SoyDiego @melloware Thanks for your reply.
I create a sandbox link, used Next js templeate. And then I installed two dependencies, which are primeicons and primereact.
I replaced the default code with the Pagination component. Waiting for the server to start completely, and you can reproduce the issue by refreshing the page.
There is the sandbox link: https://codesandbox.io/p/sandbox/agitated-butterfly-td3m97?file=%2Fapp%2Fpage.tsx%3A6%2C33
Thanks again.

[SoyDiego]

@SoyDiego @melloware Thanks for your reply. I create a sandbox link, used Next js templeate. And then I installed two dependencies, which are primeicons and primereact. I replaced the default code with the Pagination component. Waiting for the server to start completely, and you can reproduce the issue by refreshing the page. There is the sandbox link: https://codesandbox.io/p/sandbox/agitated-butterfly-td3m97?file=%2Fapp%2Fpage.tsx%3A6%2C33 Thanks again.

Sorry I don't know the solution :(

[melloware]

@aholeye it doesn't look like you followed the Tailwind instructions? https://primereact.org/tailwind/

[gucal]

Hi there,

Before proceeding, it's highly recommended that you visit primereact.org/tailwind and carefully review the available documentation.

You can use this repo (https://github.com/primefaces/primereact-examples/tree/main/nextjs-styled-tailwind) as a base for the correct setup.

If your problem continues to persist, please don't hesitate to inform us.

Thank you.

[melloware]

@aholeye your issue is FOUC: #5188

[melloware]

I will close this for now as its basically a duplicate of #5188