React app using Tailwind CSS overrides PrimeReact styles

Question

I'm currently working on a React application where I've been using Tailwind CSS for styling. It's been great so far, but I recently decided to integrate PrimeReact components into my project. However, I've run into a styling issue where Tailwind seems to override the PrimeReact component styles.

Here's what I've tried:

• I've installed PrimeReact and its dependencies using npm or yarn.
• I've included the PrimeReact stylesheets in my project.
• I'm using PrimeReact components in my application.

But it appears that the styles from Tailwind CSS are affecting the appearance of PrimeReact components. For example, the buttons and form elements in PrimeReact don't look as expected.

I've searched for solutions but haven't been able to find a clear way to isolate the styles of PrimeReact from Tailwind. Is there a recommended approach to using these two libraries together without conflicts? Do I need to manually override Tailwind styles for PrimeReact components, and if so, how can I do that?

I'd appreciate any guidance or examples on how to integrate PrimeReact with a Tailwind CSS-based React application while keeping their styles separate and functional. Thank you for your help!

Answer 1

You can try this,

On your main styles.scss, where you put the tailwind styles:

@tailwind base;
@tailwind components;
@tailwind utilities;

you need to change it to:

@layer tailwind-base, primereact, tailwind-utilities;

@layer tailwind-base {
  @tailwind base;
}

@layer tailwind-utilities {
  @tailwind components;
  @tailwind utilities;
}

This will prevent the tailwind to break or override the primereact styles

https://primereact.org/tailwind/#csslayer