Tailwind CSS issue

[C0ZEN]

Describe the bug

In v9, to style Prime I only need to add these into a .scss file.

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

In v10.0.2, this is like the app is set to unstyled: true, since no CSS is loaded, at all!
Though, I'm still able to see that the Prime classes are added into the DOM.

Reproducer

No response

PrimeReact version

10.0.2

React version

18.x

Language

TypeScript

Build / Runtime

Vite

Browser(s)

No response

Steps to reproduce the behavior

No response

Expected behavior

The styles are loaded.

[melloware]

I can't reproduce? https://stackblitz.com/edit/react-bjcylz?file=src%2FApp.js,src%2Findex.js

Can you edit my stackblitz to show the issue?

[C0ZEN]

I can try, though it may not be that easily reproducible since I'm working on a Nx+Vite project.

[C0ZEN]

I identified that the issue comes from having this line in my styles as well:

@import 'tailwindcss/base';

[melloware]

ok I think PrimeTek is going to provide guidance on using TailWind with the new unstyled mode.

[melloware]

Actually instructions here: https://primereact.org/tailwind/

[C0ZEN]

I don't get how come my app is broken just because I'm already using Tailwind.

My point is: tailwind was and should still be working WITH a theme, and the docs actually refer to using tailwind as unstyled.
This is not what I wish 🤔

[melloware]

OK then provide a reproducer like I did...

[melloware]

Without a reproducer developers can't really debug.

[C0ZEN]

@melloware here is a reproduction https://codesandbox.io/p/sandbox/prime-10-tailwind-broken-kg22lr

If you delete the import of tailwind/base, the style of Prime is back.

[melloware]

Yep it is because PrimeReact made a change with this ticket #4959 that has reduced its specificity by adding @layer PrimeReact:

So you can see your TailWind styles are now "winning" over the PrimeReact Theme:

[C0ZEN]

@tugcekucukoglu 👀

[yrios-cdd]

over the PrimeReact Theme

@melloware I have the same issue. I use primereact in an app that also uses Bootstrap, when upgrading to version 10.0.2 the styles are breaking because Bootstrap styles are "winning" over the PrimeReact Theme. In previous versions of Primereact this did not happen, Primereact styles had priority over bootstrap styles.

[melloware]

Ok I assigned to PrimeTek to investigate.

[mertsincan]

I'll check and get back to you asap. Thanks a lot for your reports!

[gucal]

Hi,

This is a layer problem. Need to implement the layer structure correctly.
Reproducer tools like stackblitz, codesandbox etc. make layers complex. This makes the correct code look wrong.

When used correctly, you will find the stackblitz examples work successfully in your local applications.
You should follow this document for proper use. https://primereact.org/tailwind

This repo works as it should. https://github.com/primefaces/primereact-examples/tree/main/nextjs-styled-tailwind

Thanks for your feedbacks.

[rohitdhas]

So, I tried importing prime-react resource files at the end and it worked! 🎉

[gucal]

Hi,

This is a layer problem. Need to implement the layer structure correctly. Reproducer tools like stackblitz, codesandbox etc. make layers complex. This makes the correct code look wrong.

When used correctly, you will find the stackblitz examples work successfully in your local applications. You should follow this document for proper use. https://primereact.org/tailwind

This repo works as it should. https://github.com/primefaces/primereact-examples/tree/main/nextjs-styled-tailwind

Thanks for your feedbacks.

I don't think you will have any problems with the layer using this method.

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

I am closing this issue now. If you see an error, you can open it again.

Thank you.

[C0ZEN]

Hi, I gave it a try and had the same issue again.
I found out why, though; it's because I import the CSS files within my .scss file.
Somehow, it's not the same output.

In your examples, the CSS files are imported within a .css file.

[melloware]

@C0ZEN you have it all working with Vite and Primereact + Styled Tailwind? Other users are asking and I think I should add an example using Vite here: https://github.com/primefaces/primereact-examples

[melloware]

Nevermind I figured it out and added a Vite + PrimeReact + Styled + TailwindCSS example: https://github.com/primefaces/primereact-examples/tree/main/vite-styled-tailwind

[jerlam06]

v10 not working on my side. I am using tailwind cli to build tailwind on file change to only extract necessary classnames used in my app. I have tried a few things mentioned above as well as Vite + PrimeReact + Styled + TailwindCSS example. Nothing works for me. Tbh I have never used css layers, and I have no time to dig into it right now. I will stick to v9 until v10 is more stable css-wise, it is a pity because v10 is fixing a few bugs I have.

[melloware]

@jerlam06 my Vite example above works fine? Can you compare mine to yours and what is broken?

[nikolapalibrk]

For me it works well when theme is imported in App.js since there I can control the order of imports, and I place the theme at the bottom. But the problem is when I want to implement theme switching ( https://primereact.org/theming/#switchthemes ) where css is loaded by placing link tag in index.html. In that case style from tailwind is loaded later and therefore overrides style from primereact theme.

[melloware]

@nikolapalibrk that makes total sense. i wonder if there is some way to do that differently to make it load last?

[primperfum]

I had the same issue and nothing worked for me. Here is my case and solution:
I use Styled Prime components, use tailwind, themes copy pasted in public folder and imported in index.html to easy switch them.

Solution for me was to remove @layer primereact from all the themes CSS files, I dont know why it needs to be there, I know nothing about css layers, but it worked for me and didnt break anything and is good enough for me.

[ArsenicBismuth]

So, I tried importing prime-react resource files at the end and it worked! 🎉

Thanks a lot for this! Basic theme classes like p-button was overridden by Tailwind, but reordering the CSS (theme.css last) fixed it.

Nevermind, it breaks again somehow?? Man this is so strange. I literally didn't change anything.

[webxzy]

没关系，我想通了并添加了一个 Vite + PrimeReact + Styled + TailwindCSS 示例：https://github.com/primefaces/primereact-examples/tree/main/vite-styled-tailwind

good，I'm Ok

[chhmanel]

So, I tried importing prime-react resource files at the end and it worked! 🎉

This is working for me, thank you so much!

[Vini-Dev-Py]

Hi guys I'm having trouble getting tailwind css to work with my react prime custom styles, could someone help me? Do you have an example of how to do it?

my more detailed problem is as follows
I have 2 themes a light and a dark where they are alternated by the “changeTheme” function of PrimeReactContext, but a few days ago tailwind was added to the project and at the moment we would like to continue with the styles via scss from primereact, but tailwind overwrote some styles, both of the light and dark theme

I even tried the examples mentioned here, but none of them show the change of themes, I can't do this part...

If I add the import of the light or dark theme in the main.css along with the layers it works, but only with the imported theme, I need a way to switch to both themes.

Translated with DeepL.com (free version)

@melloware