Next 13 + experimental app dir + Tailwind hot-reload of classes doesn't work

[Dannymx]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

❯ npx next info

Operating System:
  Platform: darwin
  Arch: x64
  Version: Darwin Kernel Version 21.6.0: Thu Sep 29 20:12:57 PDT 2022; root:xnu-8020.240.7~1/RELEASE_X86_64
Binaries:
  Node: 16.16.0
  npm: 8.11.0
  Yarn: 2.4.3
  pnpm: N/A
Relevant packages:
  next: 13.0.7-canary.3
  eslint-config-next: 13.0.3
  react: 18.2.0
  react-dom: 18.2.0

Which area(s) of Next.js are affected? (leave empty if unsure)

No response

Link to the code that reproduces this issue

https://github.com/vercel/app-playground

To Reproduce

• Grab latest version of Next.js with experimental app dir enabled (I'm using the playground example)
• Load project, go to /streaming
• In your editor, go to Product.tsx and edit a class with a width class w-* (go to line 75)
• Swap w-1/3 for w-6/12 save and wait for hot-reload (don't manually refresh the page)
• You won't see your new class applied, element will break due to class not being applied
• Go back to editor and try now w-10/12, wait for hot-reload. Same result as above.
• Set it now to w-6/12 and manually reload, you will see your class now (and it seems to be caching this class now)
• If you repeat the steps above w-6/12 won't fail anymore because it seems to be cached now somehow

Describe the Bug

Hot reloading of Tailwind CSS when you change classes in your code doesn't work.
Only works after you apply a new class and manually reload the page.

Bug in action:

Expected Behavior

Swapping Tailwind classes from elements should work when hot-reloading.

Which browser are you using? (if relevant)

Chrome 108.0.5359.98 (Official Build) (x86_64)

How are you deploying your application? (if relevant)

Locally (npm run dev)

[ciruz]

I got the same error, it only works with classes already defined somewhere else.

[trevorpfiz]

Same error on 13.0.7-canary.1. Seems to work on 13.0.6? Correct me if I'm wrong.

[iamjohnlong]

Related issue here #43396 (comment)

[ciruz]

Same error on 13.0.7-canary.1. Seems to work on 13.0.6? Correct me if I'm wrong.

I'm on 13.0.6 and it doesn't work. I just tried a fresh next.js installation based on the official tailwind guide, with the /app directory https://tailwindcss.com/docs/guides/nextjs#app-directory and it's the same problem there (13.0.6).

I up- and downgraded between different next.js versions and there is a difference between 13.0.5 and 13.0.4, hot reload works works well with 13.0.4, but is broken with 13.0.5.

[teddybee]

I have an issue as well with 13.0.6, hot reload often "loading" endless with a small project.
No experimental app dir in my case.
(node:17576) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 client/ listeners added to [EventEmitter]. Use emitter.setMaxListeners() to increase limit

[teddybee]

My problem looks like solved. I added this into the tailwind.config (excludes node_modules from purge):

  content: [
    //...
    "!./node_modules",
  ],

P.S.: Not sure if this solved my problem, other candidate was switching off the windows firewall.

[PatrikTheDev]

Unfortunately @teddybee's workaround didn't work for me, it may be because I'm in a pnpm monorepo

Still broken on latest canary

[typeofweb]

Not fixed in v13.0.7-canary.4

[masasidan]

Facing the same issue. The only workaround I've found is to downgrade your next version to 13.0.4.

[surjithctly]

I can confirm the issue. Happens specifically on app directory + v13

[huozhi]

We land a fix in 13.0.8-canary.0. Could you upgrade to to see if the hmr is fixed for you?

[Dannymx]

We land a fix in 13.0.8-canary.0. Could you upgrade to to see if the hmr is fixed for you?

Working as expected now on 13.0.8-canary.0. Marking this as completed.

[asheikho99]

doesn't seem to work for me when upgrading to 13.0.8-canary.0 but kept downgrading to 13.0.4 and started working again.

[huozhi]

@asheikho99 could you provide a reproduction, will be easier to investigate 🙏 thanks

[asheikho99]

@asheikho99 could you provide a reproduction, will be easier to investigate 🙏 thanks

Here is a GIF shows the exact issue. Notice how it's working fine until couple changes then it stops working, I would have to manually refresh to see changes.
https://imgur.com/a/H8Pt8Q6

❯ To reproduce:
https://github.com/asheikho99/hot-reload-example

❯ Using:
Firefox 108.0.1 (64-bit)
Chrome Version 108.0.5359.125 (Official Build) (64-bit)
I also made sure that is no cache for localhost

❯ npx next info

    Platform: win32
      Arch: x64
      Version: Windows 10 Pro
    Binaries:
      Node: 16.15.0
      npm: N/A
      Yarn: N/A
      pnpm: N/A
    Relevant packages:
      next: 13.0.8-canary.0
      eslint-config-next: 13.0.7
      react: 18.2.0
      react-dom: 18.2.0

[jstnmthw]

Running under WSL on Windows 10, clean yarn install doesn't work for me. New classes are not compiled in when saved.

    Operating System:                            
      Platform: linux                            
      Arch: x64                                  
      Version: #1 SMP Fri Apr 2 22:23:49 UTC 2021
    Binaries:                                    
      Node: 18.8.0                               
      npm: 9.2.0                                 
      Yarn: 1.22.19                              
      pnpm: N/A                                  
    Relevant packages:                           
      next: 13.0.8-canary.0                      
      eslint-config-next: 13.0.6                 
      react: 18.2.0                              
      react-dom: 18.2.0   

[DerTyp7]

I fixed the problem for me by adding a proper HTML structure to my RootLayout, like this:

Before (app/layout.tsx):

import "../styles/globals.scss";
import Nav from "./Nav";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <>
      <Nav />
      <main>{children}</main>
    </>
  );
}

After(app/layout.tsx):

import "../styles/globals.scss";
import Nav from "./Nav";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html>
	<head></head>
	<body>
	  <header>
            <Nav />
	  </header>
	  <main>{children}</main>
	</body>
    </html>
  );
}

[denizyoldas]

Not fixed in 13.0.7

[huozhi]

@asheikho99 I tried your reproduction on a windows VM it works for me. I feel it's another issue with windows specific based on the reports after reopening. I'd like to close this for now since it's fixed for the original issue. We can track the windows one in the new issue.

[chunsch]

@leerob I use create-next-app@canary to create a project and find that if you modify tailwindcss in the app directory, the page will be forced to refresh and scroll to the top.

In this repro, I modify the code of app/about/page.tsx, scroll to the bottom, and then modify the last element, and find that every modification will scroll to the top.

export default function About() {
  return (
    <div>
      <div className="h-[100vh] text-red-600">Block 1</div>
      <div className="h-96 text-blue-600">Block 2</div>
      <div className="h-96 text-yellow-600">Block 3</div>
    </div>
  );
}

nextjs-tailwindcss.mov

[leonardorb]

The problem here is the layout structure, like @DerTyp876 mentioned. Making sure to have the proper structure solves the issue.

[cdedreuille]

@cdedreuille Looking at your repro, it is working for me. What am I missing?

CleanShot.2023-01-16.at.16.27.49.mp4
CleanShot.2023-01-16.at.16.29.44.mp4

@leerob You are editing app/page.tsx not pages/test.tsx. My problem happen only in the pages folder, not the app folder.

[leerob]

The second video is pages/text.tsx.

[cdedreuille]

@leerob I've tested your video and it seems that the colours have been generated somehow. If you try with a completely new colour like bg-emerald-200 or bg-[#FFD000] you'll see that this colour is not applied.

You'll see in this video that colours I've used previously are updated straight away but if I try a new colour like bg-yellow-200 in my case it is not generated. I have to refresh to make this colour available.

CleanShot.2023-01-18.at.12.22.30.mp4

[kleinesNugget]

As for me I couldn’t get it to work in neither pages, nor app directory, also didn’t matter whether I was using Turbopack or not.

Edit: Looking at the console of Chrome and Firefox, both show „Reloading CSS chunk `_next/static/chunks/rsc/src_app_globals.css`“ but Chrome reflects the changes on the page, Firefox doesn’t. Firefox also doesn’t show the new classes in the styles tab. Note that the console message only seems to appear when a tailwindcss class is changed/added, not when an element is changed/added, or a non-tailwind class is added/edited.

[surjithctly]

Tailwind Integration is indeed buggy in Next 13. Both Pages and app, there are some issues.

Recently, none of my styles was affecting, but pnpm build and start loaded it correctly. It did not work on pnpm dev

finally added a space in the tailwind CSS file. Yes, just a space 🤷‍♂️. Then it worked. Wasted half an hour debugging why it did not work. I also think deleting .next would also have chances to work.

For Next.js team, Please add a --tw-debug flag so that we can see what's happening with tailwind in the CLI. class added or refreshed or loaded or everything verbose.

[psugihara]

I've noticed that sometimes it will start working in safari if I totally quit and restart the browser (not just hard refresh or close the page).

[davzie]

I'm seeing this issue too.

The reproduction is simply:

* Begin a new Next.js 13 project with app directory, using the next-create-app command.

* Install tailwind and configure it.

* Use any tailwind class in dev mode, then change the class to one you haven't used.

I'm on macOS, so it's not just a WSL issue.

The latest canary is broken in another way with an SSR rendering error, so not usable at the moment.

Edit: Ok, looks like this is a Firefox issue - it works for me in Chrome and Safari, but not in Firefox or Firefox Dev Edition. Odd.

Confirmed this fixed it for me using Next 13.1.3 on macos. My layout structure is fine too. Trying the same stuff in Chrome / Safari hot-reloads completely fine and as expected. So it looks like I'll be using Chrome until this resolves itself.

Edit: I will stick with Firefox; it's the only non-shady browser out there.

[sroussey]

I see this failure on MacOS using Next 13.1.4, so still not fixed.

FIXED: I was using the app folder, but the tailwind config only had the pages directory configured. Added the app directory and it works again.

[SheryConcepts]

Hy, I am also facing this issue. I am am using nextjs v13.1.5 (also same issue on 13.1.4).

On save, classes in browser do get changed but for them to take effect browser needs to be refreshed. But when use a previously class that took effect. Styles work without manually refreshing.

I tested on firefox and brave. With brave it works fine. So i think issue is only with firefox.

In the video when i switch 'p-20' to 'p-10' (which is previously used class that took effect on refresh) ui changes without refreshing the browser. But when I change 'p-10' to 'p-24' (which is not used previously) and hit save, class in browser console change but ui does not change. Then i refresh and 'p-24' takes effect.

My guess is that styles are not being generated by tailwind on save. ( its just a guess, i dont know anything)

[laneme]

The issue does exist on 13.1.1 and 13.1.5 for me.

But I would also like to confirm the issue DOES happen on Firefox and DOES NOT happen on Chromium. I'm using ubuntu but i dont think that matters.

I inspected the requests on both browsers and it seems firefox isnt sending the css requests. See the screenshots below

Another thing i noticed the request to / (happens on each refresh) returns different response on chrome versus firefox. Could be the same thing differently encoded/compressed which i'm not sure. Just helping with my little obsevations.

Edit: Looks like response is the same both browsers but showing as base64 on firefox network console. My bad.

So my thought is that @SheryConcepts, styles are probably being generated just not being pulled on refresh, on firefox.

Edit: Downgrading to 13.0.4 does eliminate the issue for me.
Not a big fan of the downgrade though and also see a flinker of un-styled components when applying new generated classnames.

[matthewdavi]

This is happening on 13.1.5 for me in both the app dir and pages dir. Tailwind works but requires a hard refresh in Chrome, Brave, and Safari.

[laneme]

This is happening on 13.1.5 for me in both the app dir and pages dir. Tailwind works but requires a hard refresh in Chrome, Brave, and Safari.

Interesting, the issue might really be browser independent then.

@matthewdavi But do you encounter the issue in pages directory when the appDir feature is disabled in next.config?

[vanquishkuso]

I had problems with 13.1.4 and so on, tried almost everything in this thread but still didn't work. But upgrading to canary 13.1.6 fixed it for me and it works on Firefox and Chrome using Windows.

[laneme]

I had problems with 13.1.4 and so on, tried almost everything in this thread but still didn't work. But upgrading to canary 13.1.6 fixed it for me and it works on Firefox and Chrome using Windows.

@vanquishkuso Are you saying this issue was fixed for you after you upgraded to 13.1.6-canary?

Next 13.1.6 was released today. I upgraded it to it. The issue still remains for me :/

[ngimdock]

Tailwind classes don't work, i am on nextjs 13.1.6.

[IsraelOgas]

Tailwind classes don't work, i am on nextjs 13.1.6.

@ngimdock I was testing today the latest version of NEXTJS creating a project from scratch, I did the configuration of the tailwindcss beta documentation with next 13 and the styles were not working. And it was because I put in the installation "use /src" in the project. Then looking for the error in stackoverflow, I noticed that when copying/pasting the tailwind.config.js, I forgot to change the path of the content. I feel SO Stup.... XD

Source: Stackoverflow Comment

[ngimdock]

Tailwind classes don't work, i am on nextjs 13.1.6.

@ngimdock I was testing today the latest version of NEXTJS creating a project from scratch, I did the configuration of the tailwindcss beta documentation with next 13 and the styles were not working. And it was because I put in the installation "use /src" in the project. Then looking for the error in stackoverflow, I noticed that when copying/pasting the tailwind.config.js, I forgot to change the path of the content. I feel SO Stup.... XD

Source: Stackoverflow Comment

Thanks for your sharing @IsraelOgas it solve my problem and i am feeling so stup** too

[vanquishkuso]

I had problems with 13.1.4 and so on, tried almost everything in this thread but still didn't work. But upgrading to canary 13.1.6 fixed it for me and it works on Firefox and Chrome using Windows.

@vanquishkuso Are you saying this issue was fixed for you after you upgraded to 13.1.6-canary?

Next 13.1.6 was released today. I upgraded it to it. The issue still remains for me :/

@laneme I did a from scratch installation with canary, didn't upgrade from an earlier version. If I recall I installed Tailwind first as well as mentioned in this thread. Maybe you can try cloning my test repo portfolio and see if it works?

[laneme]

@vanquishkuso Thank you for following up. I assume you mean this repo https://github.com/vanquishkuso/portfolio

I cloned it and the issue is still there. Feels weird.

I even quickly booted into a windows machine, just to be sure, installed node 18.13.0 (noticed you using 18), tested it on firefox 109 and chromium. The issue is still there.

The issue was even severe in windows. On linux, styles updated if i just reloaded the page. And worked fine on chromium. Not on windows, had to restart the next dev server for the classnames to be effective. Very weird :/

I'll leave my versions for others

Windows: npm v8.19.3, node v18.13.0, firefox 109
Ubuntu: yarn v3.1.1, npm v18.19.3, node v16.19.0, firefox 109, chromium 109

[rvanbaalen]

Here to confirm this is still an issue in NextJS 13.1.6

Works in Chrome/chromium, doesn't work in Firefox (both macos).

[sroussey]

Here are the network panel recordings for both:

Chrome: (note that is reloads the css file -- twice)

Firefox: (note that no css is reloaded)

[sroussey]

So, I looked into it more. Firefox does not reload a css file by the same name if you add it to the document.head. You can do one of two things: delete the link to css first and then add it back, or use a different name.

NextJS is using MiniCssExtractPlugin (see here).

[sroussey]

Here is a potential fix (will fix ordering issue that may exist in addDir that did not exist elsewhere:

Search you node_modules for chunkFilename: ctx.isProduction ? "static/css/[contenthash].css" : "static/css/[name].css" which you will find in two files. In the line after, add this:

            insert: function (linkTag) {
                const previous = Array.from(document.head.children).find(link=>link.href===linkTag.href);
                const after = previous?.previousElementSibling;
                
                if (after) {
                    after.insertAdjacentElement(linkTag)
                } else {
                    document.head.appendChild(linkTag)
                }
              },

The whole section will then look like this:

new MiniCssExtractPlugin({
            filename: ctx.isProduction ? "static/css/[contenthash].css" : "static/css/[name].css",
            chunkFilename: ctx.isProduction ? "static/css/[contenthash].css" : "static/css/[name].css",
            insert: function (linkTag) {
                const previous = Array.from(document.head.children).find(link=>link.href===linkTag.href);
                const after = previous?.previousElementSibling;
                
                if (after) {
                    after.insertAdjacentElement(linkTag)
                } else {
                    document.head.appendChild(linkTag)
                }
              },
            // Next.js guarantees that CSS order "doesn't matter", due to imposed
            // restrictions:
            // 1. Global CSS can only be defined in a single entrypoint (_app)
            // 2. CSS Modules generate scoped class names by default and cannot
            //    include Global CSS (:global() selector).
            //
            // While not a perfect guarantee (e.g. liberal use of `:global()`
            // selector), this assumption is required to code-split CSS.
            //
            // If this warning were to trigger, it'd be unactionable by the user,
            // but likely not valid -- so we disable it.
            ignoreOrder: true
        })));

Then npm start dev again and see if things work. Let me know please!

[Edit: BTW, probably don't need to ignoreOrder as my insert preserves the order. Also, the code is not ES5 in case someone from Next is looking at this -- the code gets turned into a string and is not transpiled.]

[shuding]

Hi all, we are tracking the issue here instead: #43396 (comment).

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.