[v4]: Full of :not(#\#) pseudo-classes generate in selectors and some styles missing/incorrect in dev mode

[hta218]

Hi team, I'm not sure if this is a bug or not, so I'm posting here before opening an issue.

Issues

• Some styles (e.g. grid) are not working in dev mode (npm run dev), but work fine in production (npm run preview).
• All generated selectors are wrapped with strange :not(#\#) pseudo-classes (see image below).
  

Repro Steps

1. Clone the repo: https://github.com/Weaverse/pilot (this is a Shopify Hydrogen project)
2. Switch to the tailwindcss-v4 branch
3. Copy .env file: cp .env.example .env
4. Install dependencies: npm install
5. Start the dev server: npm run dev
6. Open http://localhost:3456/ in the browser and inspect elements:
   • You'll see selectors like .foo:not(#\#):not(#\#) being generated
   • grid, w-screen,... classes are present in the HTML but have no CSS generated

Environment

• macOS Sequoia 15.3.2
• Node.js: v22.12.0
• npm: v11.1.0

Question

Is this a known issue or a misconfiguration on my side? Should I open a bug report? Any guidance would be much appreciated 🙏

[wongjn]

The :not(#\#) portions are added by postcss-preset-env (csstools/postcss-plugins#1556), specifically, postcss-cascade-layers that it uses.

For the utility classes not being generated, I was unable to debug due to errors when running npm run dev:

MiniOxygen: Error during evaluation: Error: write EPIPE
    at afterWriteDispatched (node:internal/stream_base_commons:159:15)
    at writeGeneric (node:internal/stream_base_commons:150:3)
    at Socket._writeGeneric (node:net:971:11)
    at Socket._write (node:net:983:8)
    at writeOrBuffer (node:internal/streams/writable:572:12)
    at _write (node:internal/streams/writable:501:10)
    at Socket.Writable.write (node:internal/streams/writable:510:10)
    at Runtime.updateConfig (/weaverse/pilot/node_modules/miniflare/src/runtime/index.ts:154:24)
    at async Miniflare2.#assembleAndUpdateConfig (/weaverse/pilot/node_modules/miniflare/src/index.ts:1431:28)
    at async Mutex.runWith (/weaverse/pilot/node_modules/miniflare/src/workers/shared/sync.ts:66:45) {
  errno: -32,
  code: 'EPIPE',
  syscall: 'write'
}
Error: write EPIPE
    at afterWriteDispatched (node:internal/stream_base_commons:159:15)
    at writeGeneric (node:internal/stream_base_commons:150:3)
    at Socket._writeGeneric (node:net:971:11)
    at Socket._write (node:net:983:8)
    at writeOrBuffer (node:internal/streams/writable:572:12)
    at _write (node:internal/streams/writable:501:10)
    at Socket.Writable.write (node:internal/streams/writable:510:10)
    at Runtime.updateConfig (/weaverse/pilot/node_modules/miniflare/src/runtime/index.ts:154:24)
    at async Miniflare2.#assembleAndUpdateConfig (/weaverse/pilot/node_modules/miniflare/src/index.ts:1431:28)
    at async Mutex.runWith (/weaverse/pilot/node_modules/miniflare/src/workers/shared/sync.ts:66:45)

[hta218]

Update:

So the issue was caused by the postcss-preset-env plugin (Thanks @wongjn for the hint!).

What I did to fix it:

• Removed postcss-preset-env from the project
• Deleted the custom postcss.config.js file
• Uninstalled any unused PostCSS-related dependencies
• Let Tailwind work with the setup via the Vite plugin only

Now everything works as expected in both dev and production. Hope this helps anyone running into the same problem!