Primereact styles not applying to components

Question

I've discovered that preflight from tailwind is causing the problem. I've read the docs and found this:

CSS Layer

Tailwind CSS can be used with styled or unstyled modes of PrimeReact. In both cases, preflight mode may break styling of the core functionality so @layer configuration in your style file that includes tailwind styles is necessary for compatibility.

@layer tailwind-base, primereact, tailwind-utilities;
   
@layer tailwind-base {
    @tailwind base;
}
   
@layer tailwind-utilities {
    @tailwind components;
    @tailwind utilities;
}

I've made the changes to my global.css file but still not working. I know this is the problem because when I don't make the import of global.css the components are fine.

Answer 1

According to the primereact documentation you need to wrap your app component with the PrimeReactProvider component.

// _app.js
import { PrimeReactProvider } from "primereact/api";

export default function MyApp({ Component, pageProps }) {
  return (
    <PrimeReactProvider>
      <Component {...pageProps} />
    </PrimeReactProvider>
  );
}

---

Update based on your edits

If your global stylesheet where you are importing the tailwind utility directives is the problem there probably is a conflict with either class names or component styling. In general it is not wise to mix styling libraries as they do not provide cross compatibility for one another.

If you want to use Tailwind CSS and have some pre-made components maybe give daisyui a try. It is a component library for Tailwind CSS.

---

Please note that stack overflow expects you to do a certain degree of research yourself before posting a question. A simple look at the documentation here surely would have sufficed.