Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
Next 13 + experimental app dir + Tailwind hot-reload of classes doesn't work
See original GitHub issueVerify 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.tsxand edit a class with a width classw-*(go to line 75) - Swap
w-1/3forw-6/12save 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/12and 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/12won’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)
Issue Analytics
- State:
- Created 9 months ago
- Reactions:33
- Comments:30 (7 by maintainers)
Top Results From Across the Web
Nextjs hot reloading taking 8-10 secs on every change of ...
The hot reload is instant even when changing/adding any tailwind class to the classname of the element in index.js file (Inline styling). So...
Read more >Using Tailwind CSS in NEXTJS 13 with TurboPack
Note: Tailwind works fine with the simple command npm run dev but with flag --turbo ... Here we will be adding an experimental...
Read more >Debugging Tailwind CSS and Next.js - LogRocket Blog
Let's add some of its utility classes to our index page and run the app. Next.js App Without Tailwind CSS Styling. It doesn't...
Read more >NextJS 13 - First Look at the /app Folder & Complete Demo
NextJS 13 introduces the beta version of the brand-new /app folder support. This folder allows you to build NextJS apps in a totally ......
Read more >Tailwind not working in experimental app directory? : r/nextjs
25K subscribers in the nextjs community. Next.js is the React framework for production by Vercel.
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
We land a fix in 13.0.8-canary.0. Could you upgrade to to see if the hmr is fixed for you?
My problem looks like solved. I added this into the tailwind.config (excludes node_modules from purge):
P.S.: Not sure if this solved my problem, other candidate was switching off the windows firewall.