Skip to content

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

@amirsinaa

Description

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions