Cannot apply PrimeReact styled theme to NextJS 14 with Tailwind

gygabyte017 commented 10 months ago

Describe the bug

I started a brand new NextJS 14 app with App Router and Tailwind automatically set up by NextJS.

Then I added PrimeReact, with the mdc theme, and configured Tailwind as explained here: https://primereact.org/tailwind/ in the styled part.

However I got something mixed that doesn't appear to be working, see reproducer: Tailwind works (the classes are successfully applied), PrimeReact components work, but the PrimeReact mdc theme doesn't seem to apply, the button is transparent, the inputs are weird as well.

Could you please check the reproducer to verify whether I did something wrong or if that is indeed a bug? Thanks a lot

Reproducer

https://stackblitz.com/edit/stackblitz-starters-i1ylh3?file=package.json

PrimeReact version

10.0.9

React version

18.x

Language

TypeScript

Build / Runtime

Next.js

Browser(s)

No response

Steps to reproduce the behavior

No response

Expected behavior

No response

melloware commented 10 months ago

I think its an issue with CodeSandbox/StackBlitz. See this solution: https://github.com/primefaces/primereact/issues/4987#issuecomment-1788784088

gygabyte017 commented 10 months ago

Ok I tried specifying imports in that order (tailwind with layers first, then primereact) (see reproducer):

import '../styles/global.css';
import 'primereact/resources/primereact.min.css';
import 'primereact/resources/themes/mdc-light-indigo/theme.css';

but so far no changes.

The truth is that first I tried on my local setup, and with npm run dev that setup works correctly (*), however when running rpm run build && npm start the production page appears exactly as in the StackBlitz, without the primereact theme.

(*) even though there is something weird like the red X in the Message component when the page loads appears in the top left corner and a few ms later it appears in the correct position, it is something ugly noticeable by the user.

Thank you

melloware commented 10 months ago

Yep @SoyDiego has a solution for this

SoyDiego commented 10 months ago

Try this: https://soydiego.notion.site/PrimeReact-How-to-fix-styles-NextJS-Tailwind-92bec3eb91594388a7be67d922460eaf Is not the best solution, it's a workaround and works. I hope someone can have a better fix/solution soon

gygabyte017 commented 9 months ago

Thank you @SoyDiego, I confirm that (weirdly enough :)) it works on dev environment. However when building for production, the production environment still behaves without primereact theme.

Can you try if workarounds 1 and 2 work for you on production env?

SoyDiego commented 9 months ago

Thank you @SoyDiego, I confirm that (weirdly enough :)) it works on dev environment. However when building for production, the production environment still behaves without primereact theme.

Can you try if workarounds 1 and 2 work for you on production env?

Yes, I have in production. Check if the styles are being applied in your head tag, inspecting the code.

gygabyte017 commented 9 months ago

Ok with workaround 1 I can see them in production with the correct order, with workaround 2 they are inverted. Seems a bit "hacky" but it works, please update the issue when there will be a definitive fix!

Thank you!

igo commented 9 months ago

I guess I have the same problem. No PrimeReact components were style properly even in dev mode. It looks like that Nextjs strips all classes that are not used directly in Nextjs app. Adding this to tailwind.config.ts seems to preserve all classes in css:

safelist: [
{
  pattern: /./ ,
  // variants: ['sm', 'md', 'lg', 'xl', '2xl'], // uncommenting this line makes next compile for too long
},
]

gygabyte017 commented 9 months ago

I guess I have the same problem. No PrimeReact components were style properly even in dev mode. It looks like that Nextjs strips all classes that are not used directly in Nextjs app. Adding this to tailwind.config.ts seems to preserve all classes in css:
safelist: [
{
  pattern: /./ ,
  // variants: ['sm', 'md', 'lg', 'xl', '2xl'], // uncommenting this line makes next compile for too long
},
]

doesn't work for me, also that pattern makes next to compile a lot longer :(

From what I have understood the css classes are not stripped, is the layer ordering that gets messed up so tailwind overwrite primereact styles

kabalan-datapostie commented 7 months ago

A few thoughts on this:

As @SoyDiego correctly pointed out in his Notion note, this is not a PrimeReact issue, but a Next.js issue. See https://github.com/vercel/next.js/issues/16630 (now https://github.com/vercel/next.js/issues/13092)
So, the question then becomes "what is the best workaround for this when we want to use themed PrimeReact and Tailwind?"
@SoyDiego's first workaround works well 👍 , but anything that requires a manual script tag is a bit messy.
I wasn't able to get @SoyDiego's second workaround to work...perhaps it worked for him as the import order of CSS in Nextjs is essentially random, so it just happened to work that time?
If we want to follow the "Next.js wisdom", the best workaround would be the one suggested in https://github.com/vercel/next.js/issues/16630#issuecomment-1762463616. However, for this, we would have to add @import "primereact/resources/themes/[your-favourite-theme]/theme.css" layer(primereact); to the script suggested by https://primereact.org/tailwind/#csslayer and remove the import for PrimeReact in layout.tsx, which doesn't seem to be correctly importing PrimeReact for me...has anyone had more luck?

gcko commented 1 week ago

@kabalan-datapostie I believe this has been addressed and fixed in NextJS as of May 1, 2024 --> https://github.com/vercel/next.js/issues/13092

CC @melloware

melloware commented 1 week ago

Thanks @gcko closed!

primefaces / primereact