Next 13 + experimental app dir + Tailwind hot-reload of classes doesn't work
Problem
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 chan
Unverified for your environment
Select your OS to check compatibility.
1 Fix
Fix Tailwind CSS Hot Reloading Issue in Next.js Experimental App Directory
The issue arises due to the way Next.js handles CSS class caching and hot reloading in the experimental app directory. Tailwind CSS generates utility classes at build time, and if the Next.js hot reloading mechanism does not recognize changes in the Tailwind configuration or CSS files, it fails to apply the updated classes until a full page refresh occurs. This is compounded by the experimental nature of the app directory, which may not fully support all features of Tailwind's JIT mode.
Awaiting Verification
Be the first to verify this fix
- 1
Update Tailwind CSS Configuration
Ensure that the Tailwind CSS configuration file (tailwind.config.js) is set up correctly to enable JIT mode and watch for changes in your files. This will help Tailwind to regenerate the styles dynamically.
javascriptmodule.exports = { mode: 'jit', purge: ['./app/**/*.{js,ts,jsx,tsx}', './pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'], theme: { extend: {}, }, variants: {}, plugins: [], }; - 2
Check Next.js Configuration
Verify that your Next.js configuration (next.config.js) is properly set up to support experimental features. Ensure that the app directory is enabled and that any necessary experimental flags are included.
javascriptmodule.exports = { experimental: { appDir: true }, }; - 3
Clear Cache and Restart Development Server
Sometimes, cached files can cause issues with hot reloading. Clear the cache and restart the Next.js development server to ensure that all changes are recognized.
bashrm -rf .next && npm run dev - 4
Test Hot Reloading
After making the above changes, edit the class in Product.tsx again and observe if the hot reloading now correctly applies the new Tailwind CSS classes without needing a manual refresh.
typescriptEdit Product.tsx and change className from 'w-1/3' to 'w-6/12', save the file, and check the browser.
Validation
Confirm that after making the changes and restarting the server, editing Tailwind CSS classes in Product.tsx applies the changes immediately without needing a manual refresh. Check the browser console for any errors related to CSS class application.
Sign in to verify this fix
Environment
Submitted by
Alex Chen
2450 rep