Infinite Compile Loop When Using next-pwa (service worker) with TailwindCSS v4

[amirsinaa]

What version of Tailwind CSS are you using?

v4.0.6

What build tool (or framework if it abstracts the build tool) are you using?

Next.js 15.1.7

What version of Node.js are you using?

v22.12.0

What browser are you using?

Firefox and Chrome

What operating system are you using?

macOS and Linux

Reproduction URL

Github : https://github.com/amirsinaa/tailwindcss4-sw-bug
Codesandbox : https://codesandbox.io/p/github/amirsinaa/tailwindcss4-sw-bug/

--

Description:

Hello,
I've recently upgraded TailwindCSS in my project from version 3 to version 4 and followed all necessary migration steps. However, I've encountered an issue when using next-pwa—or more specifically, service workers—along with the new Tailwind setup.

When I export my Next.js configuration with next-pwa, it results in an infinite compilation loop, as shown below:

✓ Compiled in 613ms (1705 modules)  
✓ Compiled in 210ms (1705 modules)  
✓ Compiled in 224ms (1705 modules)  
✓ Compiled in 225ms (1705 modules)  
✓ Compiled in 213ms (1705 modules)  
✓ Compiled in 240ms (1705 modules)  
✓ Compiled in 215ms (1705 modules)  
✓ Compiled in 212ms (1705 modules)  
✓ Compiled in 212ms (1705 modules)  
✓ Compiled in 205ms (1705 modules)  
✓ Compiled in 206ms (1705 modules)  
✓ Compiled in 210ms (1705 modules)  
✓ Compiled in 205ms (1705 modules)  
✓ Compiled in 206ms (1705 modules)  
...
... and so on.

However, if I export my Next.js config without next-pwa and do not register any service worker, everything works fine.

I dug deeper into this issue and found that when the service worker is enabled, removing the global.css file (which contains all the new Tailwind @theme directives and imports) from the root layout eliminates the problem. This suggests that there might be a conflict between service workers and the Tailwind PostCSS plugin when used together.

Additional Notes:

• I have tested this scenario with both next-pwa and @serwist, and the issue does not seem to be related to the tool used for generating the service worker.

Any insights or potential fixes would be greatly appreciated!

Thanks!

[philipp-spiess]

Hey! I took a look at your repro. What's happening is that the next-pwa addon seems to write files into your public/ folder for every compile. public/ is not part of your .gitignore and so the files inside that directory are going to be scanned for Tailwind CSS candidates and so since next-pwa updates the last write time every time, this in turn will notify Tailwind CSS to do a new compilation which seems to again trigger next-pwa to update the last write times, etc.

Two ideas on how you could fix this:

1. Add the auto-generated files inside your public folder to gitignore (I think public/*.js should do that?)
2. Specify which parts Tailwind CSS should scan for components by updating the public.css file to: @import "tailwindcss" source("../{app,components}");

[amirsinaa]

Hey Philip,
Yeah that was it, Thanks!