primereact tailwind4 working config

[domhaas]

For anyone who wants to use primereact together with Tailwind v4:

@layer theme, base, primereact, utilities;

@import "primereact/resources/themes/mira/theme.css";

@import "tailwindcss/theme" layer(theme);
@import "tailwindcss/preflight" layer(base);
@import "tailwindcss/utilities" layer(utilities);

@plugin "@tailwindcss/typography";

[melloware]

Excellent!

[skyworth01]

I am trying to include primereact in next js 15.Since tailwind version is 4.

I am getting the following error

Below is my configuration in global.css

@import "tailwindcss";
@import 'primereact/resources/themes/lara-light-blue/theme.css';

[melloware]

@skyworth01 the above fix is for Vite based installations I think NextJS is way different with how it bundles CSS.

[skyworth01]

@melloware I got the issue solved ,I used 'source' instead of 'import'

@import "tailwindcss"; @source 'primereact/resources/themes/lara-light-blue/theme.css';

[melloware]

Awesome let me update the Primereact NextJS example @skyworth01 !

[melloware]

@skyworth01 i upgraded all PrimeReact starters to Tailwind 4! https://github.com/primefaces/primereact-examples

[mercuryPark]

I upgraded Next.js to 14, PrimeReact to 19, and Tailwind to 4.0.

Overall, the migration went smoothly, but I noticed some changes in CSS priority and a few UI components not displaying styles as intended.

Is it normal for styles to change even after a successful upgrade?

[skyworth01]

@mercuryPark You might need to check the order of layers,when tailwind 4 is configured the order will be like this @layer theme, base, components, utilities;.

So when configuring primereact the order should @layer theme, base, primereact, components, utilities;

I think this is an example

@layer theme, base, primereact, components, utilities; @import "tailwindcss/theme.css" layer(theme); @import "tailwindcss/preflight.css" layer(base); @import "tailwindcss/utilities.css" layer(utilities);

[mercuryPark]

@skyworth01 Thank you. However, isn't it common to use @import 'tailwindcss'; and @import 'primereact/resources/themes/lara-light-indigo/theme.css'; in Next.js? I assumed that Tailwind CSS would always have higher priority over PrimeReact, but their priorities have been reversed. Is there a way to resolve this in Next.js?

[skyworth01]

@mercuryPark When u import it like that ,higher priority will be for primereact

To get the priority for tailwind css ,new configuration will not work.U have to give the old configuration.

@layer theme, base, primereact, components, utilities; @import "tailwindcss/theme.css" layer(theme); @import "tailwindcss/preflight.css" layer(base); @import "tailwindcss/utilities.css" layer(utilities);

This configuration worked for me.

[melloware]

In Tailwind 4 its different you can see from my Example projects.

Next.js you have to use @source

@import "tailwindcss";

@source 'primereact/resources/themes/saga-blue/theme.css';

Vite you have to use import.

@import "tailwindcss";

@import 'primereact/resources/themes/saga-blue/theme.css';

See all my examples here: https://github.com/primefaces/primereact-examples

[mercuryPark]

@layer theme, base, primereact, components, utilities; @import "tailwindcss/theme.css" layer(theme); @import "tailwindcss/preflight.css" layer(base); @import "tailwindcss/utilities.css" layer(utilities);

i resolved it! thank you :)

[temuriii]

Days of debugging fixed with one line, fml

[sameer-das]

I faced the same issue recently. Why is this not documented in their official sites!! Followed the above solution and it worked.