Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Tailwind: NextJs production build removes styles #5187

Closed
zawasp opened this issue Oct 29, 2023 · 32 comments · Fixed by #6330
Closed

Tailwind: NextJs production build removes styles #5187

zawasp opened this issue Oct 29, 2023 · 32 comments · Fixed by #6330
Assignees
@mertsincan
Labels
Component: NextJS NextJS related issue Component: Tailwind Tailwind specific issue Resolution: Workaround Issue or pull request contains a workaround. It needs to be reviewed further by Core Team

Comments

@zawasp
Copy link
Contributor

zawasp commented Oct 29, 2023

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

Prod build:
image

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.
@zawasp 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 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
@melloware

This comment was marked as outdated.

Sign in to view
@bweis

This comment was marked as outdated.

Sign in to view
@zawasp

This comment was marked as outdated.

Sign in to view
@heltonricardo

This comment was marked as outdated.

Sign in to view
@zawasp

This comment was marked as outdated.

Sign in to view
@heltonricardo
Copy link

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)

@SoyDiego

This comment was marked as outdated.

Sign in to view
@melloware 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
@melloware

This comment was marked as outdated.

Sign in to view
@heltonricardo

This comment was marked as outdated.

Sign in to view
@zawasp

This comment was marked as outdated.

Sign in to view
@zawasp

This comment was marked as outdated.

Sign in to view
@melloware

This comment was marked as outdated.

Sign in to view
@heltonricardo

This comment was marked as outdated.

Sign in to view
@zawasp

This comment was marked as outdated.

Sign in to view
@SoyDiego

This comment was marked as outdated.

Sign in to view
@melloware melloware pinned this issue Nov 8, 2023
@melloware melloware changed the title Tailwind: Nextjs production build removes default Primereact Tailwind style Tailwind: NextJs production build removes styles Nov 10, 2023
@melloware melloware added the Component: NextJS NextJS related issue label Nov 25, 2023
@melloware melloware mentioned this issue Nov 28, 2023
Closed
@hunghvu
Copy link

hunghvu commented Dec 18, 2023

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)

@melloware melloware mentioned this issue Jan 4, 2024
Closed
@snlaight
Copy link

snlaight commented Apr 8, 2024

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

This comment was marked as outdated.

Sign in to view
melloware added a commit to melloware/primereact that referenced this issue Apr 8, 2024
@melloware
Fix primefaces#5187: TailWind Styled mode instructions
06fa2a2
@melloware melloware mentioned this issue Apr 8, 2024
Merged
@melloware

This comment was marked as outdated.

Sign in to view
melloware added a commit to melloware/primereact that referenced this issue Apr 8, 2024
@melloware
Fix primefaces#5187: TailWind Styled mode instructions
96746f6
melloware added a commit to melloware/primereact that referenced this issue Apr 8, 2024
@melloware
Fix primefaces#5187: TailWind Styled mode instructions
33906aa
@hunghvu

This comment was marked as outdated.

Sign in to view
@melloware

This comment was marked as outdated.

Sign in to view
melloware added a commit that referenced this issue Apr 8, 2024
@melloware
Fix #5187: TailWind Styled mode instructions (#6330)
131e680
@melloware melloware reopened this Apr 8, 2024
@github-actions 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
@hunghvu

This comment was marked as outdated.

Sign in to view
@melloware

This comment was marked as outdated.

Sign in to view
@hunghvu

This comment was marked as outdated.

Sign in to view
@snlaight

This comment was marked as outdated.

Sign in to view
@melloware 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
@jrugel

This comment was marked as outdated.

Sign in to view
@melloware

This comment was marked as outdated.

Sign in to view
@jrugel

This comment was marked as outdated.

Sign in to view
@melloware
Copy link
Member

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

YadBro commented Apr 27, 2024

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

@melloware
Copy link
Member

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

@YadBro
Copy link

YadBro commented Apr 27, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@mertsincan mertsincan

Labels
Component: NextJS NextJS related issue Component: Tailwind Tailwind specific issue Resolution: Workaround Issue or pull request contains a workaround. It needs to be reviewed further by Core Team
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Fix #5187: TailWind Styled mode instructions melloware/primereact
10 participants
@zawasp @melloware @bweis @mertsincan @jrugel @SoyDiego @heltonricardo @hunghvu @snlaight @YadBro