Tailwind: NextJs production build removes styles #5187

zawasp · 2023-10-29T19:51:02Z

Describe the bug

When running a dev build, the default Primereact Tailwind style seems fine. However when doing a prod build, it's removed.
Dev build:

Prod build:

Reproducer

https://codesandbox.io/p/sandbox/dazzling-paper-7mmcnz

PrimeReact version

10.0.7

React version

18.x

Language

TypeScript

Build / Runtime

Next.js

Browser(s)

No response

Steps to reproduce the behavior

No response

Expected behavior

Default Tailwind style should appear when doing a production build.

heltonricardo · 2023-11-06T18:25:59Z

I managed to resolve it by adding this code to the layout.tsx file:

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

Source: [PrimeReact] How to fix styles NextJS + Tailwind (@SoyDiego)

hunghvu · 2023-12-18T17:59:20Z

I also saw this issue, but it is not always reproducible. From my research, then the problem is in the way Next.js bundling CSS layers in production. There is a long thread that originates from 2020 on this matter, and seems like it won't be fixed anytime soon.

vercel/next.js#16630 (comment)

snlaight · 2024-04-08T14:02:02Z

I tried the solutions above , but it seems that if you're using a theme from primereact, these solutions won't work. However, the following worked for me : following the instructions from primereact, in your globals.css, update the layer imports as follows:

@layer tailwind-base, primereact, tailwind-utilities;
@import 'primereact/resources/themes/saga-blue/theme.css' layer(primereact);

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

the key is to include your theme's css file as the primereact layer in your css file-- this has worked as a workaround for me when deploying to vercel. the order is important here, so it's important to import the css after declaring the tailwind-base, primereact, tailwind-utilities layer.

melloware · 2024-04-11T14:53:55Z

I just updated this example for Next 14 and its working in Dev and Prod mode and showing the styles fine: https://github.com/primefaces/primereact-examples/tree/main/nextjs-styled-tailwind

YadBro · 2024-04-27T11:37:05Z

In nextjs app router still not showing when prod mode, where nextjs app router example?

melloware · 2024-04-27T11:38:23Z

@YadBro subscribe to this issue: primefaces/primereact-examples#19

YadBro · 2024-04-27T11:45:32Z

I think this issue is theme, previously i used "primereact/resources/themes/saga-green/theme.css", and i change to "primereact/resources/themes/lara-light-green/theme.css" and then build it work, but not full loaded too. like hover text-color is not loaded but in dev is loaded

brettdebt · 2024-06-15T18:43:11Z

I managed to resolve it by adding this code to the layout.tsx file:
<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.

Source: [PrimeReact] How to fix styles NextJS + Tailwind (@SoyDiego)

Thank you, this works for me. Would love to find a more solid solution. I've been through most related Gitlab\Stack issues and have tried several potential fixes but only this seems to work for me.

SoyDiego · 2024-06-15T19:00:55Z

I managed to resolve it by adding this code to the layout.tsx file:
<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.

Source: [PrimeReact] How to fix styles NextJS + Tailwind (@SoyDiego)
Thank you, this works for me. Would love to find a more solid solution. I've been through most related Gitlab\Stack issues and have tried several potential fixes but only this seems to work for me.

I'm glad my workaround helped you

melloware · 2024-06-16T11:25:35Z

@BrettSGA are you saying this example did NOT work for you: https://github.com/primefaces/primereact-examples/tree/main/nextjs-styled-tailwind

That one was working for me last I tested it in both DEV and PRD mode.

codingHanna · 2024-07-15T12:34:43Z

@melloware
I am trying to use STYLED primereact components, in a Nextjs project that also used tailwind.
I am using the new setup of Nextjs, with layout files instead of app.js (unlike the provided example).
However, I did try to follow the example, anyways, moving the relevant code in app.js into my root layout.
I tried to use the layers trick in globals.css. It did not work for me, unfortunately. The primereact styles are just not getting through.

dangerously setting the inner HTML does work, but I would really like to avoid that in production.

melloware · 2024-07-15T12:47:35Z

@codingHanna you see my example above works if you check it out and run npm run install and npm run dev right? The styles and tailwind both working together? Make sure you didn't accidentally break something in your project or start with that starter first?

zawasp added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label Oct 29, 2023

melloware added Component: Tailwind Tailwind specific issue and removed Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible labels Oct 29, 2023

This comment was marked as outdated.

Sign in to view

melloware added the Resolution: Workaround Issue or pull request contains a workaround. It needs to be reviewed further by Core Team label Nov 6, 2023

This comment was marked as outdated.

Sign in to view

melloware assigned mertsincan Nov 7, 2023

melloware pinned this issue Nov 8, 2023

melloware changed the title ~~Tailwind: Nextjs production build removes default Primereact Tailwind style~~ Tailwind: NextJs production build removes styles Nov 10, 2023

melloware added the Component: NextJS NextJS related issue label Nov 25, 2023

melloware mentioned this issue Nov 28, 2023

PrimeReact styles not applied on production for Nextjs+PrimeReact app #5437

Closed

melloware mentioned this issue Jan 4, 2024

CSS Breaks only in Production (Next.js App Router + Tailwind) #5684

Closed

This comment was marked as outdated.

Sign in to view

melloware added a commit to melloware/primereact that referenced this issue Apr 8, 2024

Fix primefaces#5187: TailWind Styled mode instructions

06fa2a2

melloware mentioned this issue Apr 8, 2024

Fix #5187: TailWind Styled mode instructions #6330

Merged

This comment was marked as outdated.

Sign in to view

melloware added a commit to melloware/primereact that referenced this issue Apr 8, 2024

Fix primefaces#5187: TailWind Styled mode instructions

96746f6

melloware added a commit to melloware/primereact that referenced this issue Apr 8, 2024

Fix primefaces#5187: TailWind Styled mode instructions

33906aa

This comment was marked as outdated.

Sign in to view

melloware closed this as completed in #6330 Apr 8, 2024

melloware added a commit that referenced this issue Apr 8, 2024

Fix #5187: TailWind Styled mode instructions (#6330)

131e680

melloware reopened this Apr 8, 2024

github-actions bot added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label Apr 8, 2024

This comment was marked as outdated.

Sign in to view

melloware removed the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label Apr 10, 2024

melloware closed this as completed Apr 10, 2024

This comment was marked as outdated.

Sign in to view

Tailwind: NextJs production build removes styles #5187

Tailwind: NextJs production build removes styles #5187

Comments

zawasp commented Oct 29, 2023

Describe the bug

Reproducer

PrimeReact version

React version

Language

Build / Runtime

Browser(s)

Steps to reproduce the behavior

Expected behavior

This comment was marked as outdated.

This comment was marked as outdated.

This comment was marked as outdated.

This comment was marked as outdated.

This comment was marked as outdated.

heltonricardo commented Nov 6, 2023

This comment was marked as outdated.

This comment was marked as outdated.

This comment was marked as outdated.

This comment was marked as outdated.

This comment was marked as outdated.

This comment was marked as outdated.

This comment was marked as outdated.

This comment was marked as outdated.

This comment was marked as outdated.

hunghvu commented Dec 18, 2023

snlaight commented Apr 8, 2024

This comment was marked as outdated.

This comment was marked as outdated.

This comment was marked as outdated.

This comment was marked as outdated.

This comment was marked as outdated.

This comment was marked as outdated.

This comment was marked as outdated.

This comment was marked as outdated.

This comment was marked as outdated.

This comment was marked as outdated.

This comment was marked as outdated.

melloware commented Apr 11, 2024

YadBro commented Apr 27, 2024

melloware commented Apr 27, 2024

YadBro commented Apr 27, 2024

brettdebt commented Jun 15, 2024

SoyDiego commented Jun 15, 2024

melloware commented Jun 16, 2024

codingHanna commented Jul 15, 2024 • edited Loading

melloware commented Jul 15, 2024

codingHanna commented Jul 15, 2024 •

edited

Loading