New Angular installation fails to serve

[StephanBis]

What version of Tailwind CSS are you using?

v4.1.4

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

Angular v18.2.1 (but same behaviour on v19.x)

What version of Node.js are you using?

v22.13.1 (same issue on v22.14.0)

What browser are you using?

Chrome v135.x.x

What operating system are you using?

Windows

Reproduction URL
GitHub repo. npm install won't work as you need to use npm install tailwindcss @tailwindcss/postcss postcss --force described in step 2 of the official guide.

Describe your issue

When exactly following the official guide (https://tailwindcss.com/docs/installation/framework-guides/angular) to install Tailwind with Angular, step 5 (ng serve) fails with the following error:

An unhandled exception occurred: Unexpected token '', "{
  "plu"... is not valid JSON
See "C:\Users\xxx\AppData\Local\Temp\ng-cnJxrA\angular-errors.log" for further details.

We first tried it in an existing Angular project which is running v19.x but it gave the same error. Afterwards we tried it with a completely new project by following the official guide.

[wongjn]

Your .postcssrc.json file is encoded with UTF-8 with BOM. The BOM is what seems to be tripping up the Angular build system. Consider re-saving the file with UTF-8 encoding (without BOM).

[StephanBis]

I initially created the file through WebStorm. It's working now after creating the file manually through Windows Explorer. Very weird though, never had this kind of issue before. Thank you.

[sollbis]

I had this error too. You can change the default encoding in WebStorm to UTF-8 without BOM under Settings > Editor > File Encodings.