Introduction

I don't know why, NextJS is changing the order of the CSS Layers. I found a workaround to solve it. Maybe is not the best solution but I hope someone can find a better way. You can find more info here: https://github.com/vercel/next.js/issues/16630

PROBLEM

Styles are broken.

screenshot1.jpg

If you inspect wit the browser (in my case Firefox, you can see the order of the layers) and PrimeReact is first (this is the problem)

Untitled

And in the second file you have Tailwind:

Untitled

POSSIBLE SOLUTION (WORKAROUND)

Add in your layout.tsx the next code:

<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>

The most important here is specify the order of the layers. In our case @layer tailwind-base, primereact, tailwind-utilities; . This is forcing the browser to follow the order. And also delete unnecessary CSS. In my case I had another style in my imports (primereact.min.css)

Untitled

Doing this, you will see the styles are perfectly and in the first code, you will see the line that we added:

Untitled

SECOND SOLUTION (I DON’T KNOW WHY IS WORKING)

If you remove a space between tailwind-base and tailwind-utilities and then remove the primereact.min.css all is working too.