Support for Tailwind 4 @tailwindcss/postcss

[ratsey]

For which library do you need help?

native-federation

Question

Attempting to migrate a working native federation project with Tailwind 3 to TW4. This includes adding the package @tailwindcss/postcss and configuring it to run with the .postcssrc.json config:

{
  "plugins": {
    "@tailwindcss/postcss": {}
  }
}

When run, this produces errors from the federated build:

X [ERROR] Could not resolve "node:fs"

    node_modules/@tailwindcss/postcss/dist/index.mjs:40:15:
      40 │ import re from "node:fs";
         ╵                ~~~~~~~~~

  The package "node:fs" wasn't found on the file system but is built into node. Are you trying to    
  bundle for node? You can use "platform: 'node'" to do that, which will remove this error.

0 of 1 warning and 1 of 52 errors shown (disable the message limit with --log-limit=0)
 ERR!  Error bundling shared npm package 
 ERR!  Build failed with 52 errors:
 ERR!  node_modules/@tailwindcss/node/dist/index.mjs:8:19: ERROR: Could not resolve "node:module"    
 ERR!  node_modules/@tailwindcss/node/dist/index.mjs:9:36: ERROR: Could not resolve "node:url"       
 ERR!  node_modules/@tailwindcss/node/dist/index.mjs:25:14: ERROR: Could not resolve "node:fs"       
 ERR!  node_modules/@tailwindcss/node/dist/index.mjs:26:15: ERROR: Could not resolve "node:fs/promise

Adding "@tailwindcss/postcss" to the federation.config.js 'skip' array removes the issue but then the postprocessor does not run. I'm logging this as a question rather than a bug since it may just be a misconfiguration on my part?

"@angular-architects/native-federation": "^19.0.7"
"@angular/cli": "^19.1.5"

Node v22.10.0

[manfredsteyer]

Please try moving @tailwindcss/postcss from dependencies into devDependencies in your package.json.

[situlindia]

@manfredsteyer this is not working. Ng serve goes into endless loop