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

[Dannymx]

Verify canary release

• [X] 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 https://github.com/vercel/next.js/issues/43396#issuecomment-1342924284

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

[phuson]

For the record, this is mostly fixed for me (I haven't thoroughly tested it yet) in canary version 13.0.8-canary.0. But I'm using it on a Mac M1.

[jstnmthw]

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

@huozhi, I used Linux under WSL and it doesn't work for me. So not just only Windows specific? Can you at least link the new issue so others can follow the core issue of it not refreshing/compiling classes?

[Melvynx]

I follow all the thread and it didn't work for me.

    Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 22.1.0: Sun Oct  9 20:15:09 PDT 2022; root:xnu-8792.41.9~2/RELEASE_ARM64_T6000
    Binaries:
      Node: 18.9.0
      npm: 8.19.1
      Yarn: N/A
      pnpm: 7.18.2
    Relevant packages:
      next: 13.0.8-canary.0
      eslint-config-next: 13.0.4
      react: 18.2.0
      react-dom: 18.2.0

I switch to 13.0.8-canary.0 but hot-reloading tailwind style doesn't work.

I follow all this issues and add

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

But this change nothing.

This is a reproducible example : https://github.com/Melvynx/test-next-v13-tailwind-hot-reload

I hope it's just me ! Thanks you for your answer.

PS : module scss doesn't reload to, i need a hard refresh

[mxswat]

Also, on next 13.0.8-canary.4 tailwind does not work at all, and no CSS is loaded. I will try 13.0.8-canary.0 and update this comment if I get something close to working

Update: 22-12-2022

On canary 13.0.8-canary.5 tailwind is still broken, and no CSS is loaded

[rikimbili]

On version 13.1.0 TailwindCSS appears to still be broken when using with the app directory. The last working version for me is 13.0.6

[jupelost]

i get a hydration error on version 13.1.0

[robert-yates]

I can also confirm 13.1 not working but rolling back the version fixes it

[babaei-mostafa]

Same here. On version 13.1.0 Tailwindcss not working on app directory. I tried every single solution and still not working.

[ondrej-langr]

Same here - version 13.0.6 still works. Version 13.0.7 is where it breaks and 13.1 does not fix it. Seems like turbopack and swc_core was updated for that 13.0.7 version. That may be the reason

[nghiepdev]

Same here in Next v13.1.1

[babaei-mostafa]

Same here - version 13.0.6 still works. Version 13.0.7 is where it breaks and 13.1 does not fix it. Seems like turbopack and swc_core was updated for that 13.0.7 version. That may be the reason

Thank you for this information. I downgraded to version 13.0.6 and the problem got solved

[AndresdoSantos]

I don't remember who said it anymore, but it worked after I put it on version 13.0.6

[caickdias]

Windows 10, it didn't work for me either on version 13.1.1. I tried downgrading to 13.0.6, no success. Then I tried 13.0.4 and it worked.

[SinfulHymn]

I'm on fedora linux

13.1.1 not wroking for me .

[elhe26]

Windows 10, didn't work for me either on version 13.1.1.

Same issue.

[andresev]

Downgraded from version 13.1.1 to 13.0.4 and it works now.

[AminAddow]

Same issue for me on v13.1.

[SinfulHymn]

Since this issue is closed, what’s happening to the feedback here?

[PatrikTheDev]

I don't understand either, it's clearly still not fixed in the recent versions based on user feedback. Doesn't work past 13.0.4 for me

[rikimbili]

For me it is working on 13.1.1. Make sure you are using the exact version "next": "13.1.1" instead of "next": "^13.1.1".

[SinfulHymn]

For me it is working on 13.1.1. Make sure you are using the exact version "next": "13.1.1" instead of "next": "^13.1.1".

Still not working probably my environment then.

[ekil1100]

It is still not working on 13.1.1.

experimental: {
    appDir: true,
}

Also, I found out enable appDir does affect TailwindCSS hot-reload of classes in pages folder.

[reginpv]

Still same issue for me V13.1.1

Putting in "!./node_modules", inside tailwind config content looks like fixed it for me:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx}",
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
    "!./node_modules",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

[andresev]

@reginpv this worked! I did a brand new build of next.js 13 with app directory using yarn create next-app --experimental-app

After that, I installed Tailwindcss:

yarn add -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Added the Tailwind directives to globals.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

And lastly, modified the tailwind.config.js file:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './app/**/*.{js,ts,jsx,tsx}',
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
    '!./node_modules',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

I previously had done this but it didn't work when I did everything manually and started with just yarn add next-app. Weirdly, it works when I did it this way starting with yarn add next-app --experimental-app

[reginpv]

@andresev exactly how I did it!

[kengeo]

After trying for a while with all the suggestions, adding the following to your root layout file works:

import "../styles/dist.css";
import "tailwindcss/tailwind.css"; <-- add this

It works with 13.1.1 as well.

[psugihara]

I've tried every mentioned solution with no luck.

Downgrading to 13.0.4 seems to work for me. Hopefully this gets fixed soon.

Edit: I'm on macOS 13.0.1 (22A400) and work in safari.

[PatrikTheDev]

@leerob why is this issue closed? There are many reports of it still happening

[gabooh]

I managed to fix it but I'm not sure how. I changed my root layout according to https://github.com/vercel/next.js/issues/43878#issuecomment-1356861154 but removing parts of it now and it still work. Not sure what exactly fixed it.

[leerob]

@PatrikTheDev do you have a reproduction using the latest canary?

[engageintellect]

same issue. 13.1.1, WSL, Tailwind + DaisyUI