React app using Tailwind CSS overrides PrimeReact styles

Question

React app using Tailwind CSS overrides PrimeReact styles

1.3k Views Asked by Yarden Yosef At 12 April 2025 at 14:47

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!

Original Q&A

There are 3 best solutions below

**Melloware** · Answer 1

a workaround has been provided in this ticket: https://github.com/primefaces/primereact/issues/5187

<head>
      <script
          dangerouslySetInnerHTML={{
            __html: `
              const style = document.createElement('style')
              style.innerHTML = '@layer tailwind-base, primereact, tailwind-utilities;'
              style.setAttribute('type', 'text/css')
              document.querySelector('head').prepend(style)
            `,
          }}
        />
</head>

It doesn't seem to be the best way to solve it, but it was the only one that worked.

**core2drew** · Answer 2

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

**Numan Anees** · Answer 3

In your manin.tsx just import PrimeReactProvider and Tailwind.

import React from "react";
import ReactDOM from "react-dom";
import App from "./App.tsx";
import { PrimeReactProvider } from "primereact/api";
import Tailwind from "primereact/passthrough/tailwind";


ReactDOM.render(
  <React.StrictMode>
    <PrimeReactProvider value={{ pt: Tailwind }}>
      <App />
    </PrimeReactProvider>
  </React.StrictMode>,
  document.getElementById("root")
);

React app using Tailwind CSS overrides PrimeReact styles

There are 3 best solutions below

Related Questions in REACTJS

Related Questions in TAILWIND-CSS

Related Questions in PRIMEREACT

Trending Questions

Popular # Hahtags

Popular Questions