Login/Register
React app using Tailwind CSS overrides PrimeReact styles
Asked Answered
reactjstailwind-cssprimereact
S

4

7

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!

Spaulding answered 30/10, 2023 at 11:49 Comment(1)
Please follow this open GitHub issue: github.com/primefaces/primereact/issues/4987 – Lysander
T
6

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

Trapezoid answered 14/2 at 12:17 Comment(3)
I did and now I cannot use @apply to apply tailwind classes in scss. Trying to figure this out. Does anyone face the same issue> – Tabriz
Can you elaborate what do you mean in you cannot use @apply in tailwind? – Trapezoid
This should be the accepted answer – Beryllium
S
1

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")
);
Smalls answered 22/2 at 14:25 Comment(0)
L
0

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.

Lysander answered 9/11, 2023 at 15:33 Comment(0)
L
-1
<script>
  const handleDomReady = () => {
    const style = document.createElement('style');
    style.innerHTML = '@layer tailwind-base, primereact, tailwind-utilities;';
    style.setAttribute('type', 'text/css');
    document.querySelector('head').prepend(style);
  };

  window.addEventListener('DOMContentLoaded', handleDomReady);
</script>

This worked for me too

Linguistician answered 5/4 at 4:56 Comment(1)
This is almost a copy-paste of another answer – Senegal

© 2022 - 2024 — McMap. All rights reserved.