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

Dannymx commented 1 year ago

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

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)

kleinesNugget commented 1 year ago

Same issue. Classes assigned when executing npm run dev work, but once I assign a class that didn't exist on start it just doesn't create them. I created a project using npx create-next-app@latest testing --typescript --experimental-app --eslint (Version 13.1.1) then changed the dev script in the package.json to next dev --turbo and finally installed tailwindcss following the steps in their tailwindcss nextjs guide (Category "Using the app directory") starting from step 2, as I already created the project. Now you can assign any container a tailwindcss class (i.e. bg-red-500), then run npm run dev and it'll work. If you were to change the color to let's say bg-green-500, the container won't have any color anymore. The class simply didn't exist on server start and it doesn't get created on hot reload. I'm on Windows 11, using the latest Firefox and Visual Studio Code.

ngoov commented 1 year ago

Same issue with nextjs 13.1.1 and canary with windicss. Already posted an issue on their webpack plugin also, because I thought it might be related to that. The repro codesandbox: CSB

Just change the bg-red-500 to something like bg-red-800 or bg-blue-500, something that is not used in the app yet and it will not have any style.

Dannymx commented 1 year ago

I'm the author of this GitHub issue and I can say the issue was fixed for me for my specific settings (I use macOS).

It seems that the people who still have the issue run Windows or WSL, as well as having an incorrect rootLayout.

If you are on those settings mentioned above please create a new detailed issue, as this issue should be marked as closed because the latest canary fixed the problem for me.

shaunchurch commented 1 year ago

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.

magoz commented 1 year ago

Same issue here on macOS using Next 13.1.1 and the latest version of Tailwind and Turborepo.

kleinesNugget commented 1 year ago

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.

Just like the author of the issue suggested, I've created a new issue since this issue really seems to just be just on Firefox now. https://github.com/vercel/next.js/issues/44782

aandriamanga commented 1 year ago

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.

It’s work for me. But need to move tailwindcss from dev dependencies to dependencies.

windows 10 + wsl + NextJS 13.1.1 with pages dir + docker

psugihara commented 1 year ago

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.
It’s work for me. But need to move tailwindcss from dev dependencies to dependencies.

windows 10 + wsl + NextJS 13.1.1

Will that include all unpruned tailwind classes in your production build? If so, that's a lot of extra CSS.

aandriamanga commented 1 year ago

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.
It’s work for me. But need to move tailwindcss from dev dependencies to dependencies. windows 10 + wsl + NextJS 13.1.1
Will that include all unpruned tailwind classes in your production build? If so, that's a lot of extra CSS.

Interesting point. Finally, it’s not a right solution.

cdedreuille commented 1 year ago

I'm having the same issue. In my case, I have the appDir activated but I'm still using the pages folder. I only have Sanity on the app folder. The weird thing is that it seems that it only refresh if the class name has already been used somewhere else. If that's a new one I have to refresh.

All the code is available here: https://github.com/cdedreuille/portfolio-2022

@Dannymx Can you open this issue again? It doesn't seem to be fixed.

kleinesNugget commented 1 year ago

I'm having the same issue. In my case, I have the appDir activated but I'm still using the pages folder. I only have Sanity on the app folder. The weird thing is that it seems that it only refresh if the class name has already been used somewhere else. If that's a new one I have to refresh.

All the code is available here: https://github.com/cdedreuille/portfolio-2022

@Dannymx Can you open this issue again? It doesn't seem to be fixed.

Are you using Firefox? If so, I've opened a new issue because it seems to only be affecting Firefox. (https://github.com/vercel/next.js/issues/44782)

cdedreuille commented 1 year ago

@kleinesNugget I'm using Chrome and Safari. I'm not sure it is a browser problem.

kleinesNugget commented 1 year ago

Hm, that's odd then. Not quite sure what similarities we share then. For me it works when I use Chrome, but it doesn't work on Firefox, it's also pretty irrelevant whether I use Turbopack and the app directory, or not.

Edit: I haven't tested it, but could it be related to the installed node version? I'm running the latest (19.4.0) node version

zzulanas commented 1 year ago

Not working for me on Next 13.1.2. Using Firefox/Chrome/Safari and just started a new project using Next with the experimental app dir and the tailwind config setup as noted here: https://tailwindcss.com/docs/guides/nextjs#app-directory. Wasn't able to fix by downgrading either.

leerob commented 1 year ago

Can anyone reproduce this in CodeSandbox for example? That would help pinpoint if it's a Next.js issue or an issue with your machine (e.g. it's still working as expected on my machine). It's also possible it's a Windows issue.

There was one posted above, but it's using Windi CSS which I'm not sure if the common theme here.

cdedreuille commented 1 year ago

@leerob Here is a codesandbox to reproduce the issue I'm having.

https://codesandbox.io/p/sandbox/quizzical-austin-9rcihp?selection=%5B%7B%22endColumn%22%3A1%2C%22endLineNumber%22%3A10%2C%22startColumn%22%3A1%2C%22startLineNumber%22%3A10%7D%5D&file=%2Fpages%2Ftest.tsx

If appDir is set to false, tailwind updates without any issue when you save the file. But if appDir is set to true then I have to reload every time to see the update. I just want to make it clear that this is happening for me on the pages routing system. In my case, I have Sanity in the new app folder and I have to keep my site in the pages folder because the 'as' property is not there yet in the new routing. I hope this makes sense.

I also made a video to show the issue just in case: https://share.cleanshot.com/rWbx5WHx

leerob commented 1 year ago

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

https://user-images.githubusercontent.com/9113740/212774511-f24afdbf-9966-422e-a301-24e8d2ef837d.mp4

https://user-images.githubusercontent.com/9113740/212774646-6c85e73d-b860-46b1-b859-ddca96cd4af2.mp4

engageintellect commented 1 year ago

Deleted node_modules, installed tailwind first, then running npm I solved my issue.

For reference, I was unable to re-produce on a Mac, only WSL.

All good here 👍🏻

chunsch commented 1 year ago

@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>
  );
}

https://user-images.githubusercontent.com/14866288/212792379-f55dfaae-2429-4cc8-9d13-368e0711f69e.mov

leonardorb commented 1 year ago

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

cdedreuille commented 1 year ago

@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 commented 1 year ago

The second video is pages/text.tsx.

cdedreuille commented 1 year ago

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

https://user-images.githubusercontent.com/1540635/213171154-4d346913-e109-40b6-8008-f6b6e42188ec.mp4

kleinesNugget commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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)

simplescreenrecorder-2023-01-24_14 18 08

laneme commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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

IsraelOgas commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

@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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

Hi all, we are tracking the issue here instead: https://github.com/vercel/next.js/issues/43396#issuecomment-1405218446.

github-actions[bot] commented 1 year ago

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.

vercel / next.js