Installing tailwind with angular latest - dependency error

[mahesh-riddles]

> npm install -D tailwindcss
> 
> added 28 packages, and audited 1001 packages in 8s
> 
> 123 packages are looking for funding
>   run `npm fund` for details
> 
> 3 vulnerabilities (1 low, 2 moderate)
> 
> To address all issues (including breaking changes), run:
>   npm audit fix --force
> 
> Run `npm audit` for details.
> mahesh@Maheshs-MacBook-Air admin_ng % npm audit  
> # npm audit report
> 
> undici  6.0.0 - 6.11.0
> Undici's fetch with integrity option is too lax when algorithm is specified but hash value is in incorrect - https://github.com/advisories/GHSA-9qxr-qj54-h672
> Undici's Proxy-Authorization header not cleared on cross-origin redirect for dispatch, request, stream, pipeline - https://github.com/advisories/GHSA-m4v8-wqvr-p9f7
> fix available via `npm audit fix --force`
> Will install @angular-devkit/[email protected], which is a breaking change
> node_modules/undici
>   @angular-devkit/build-angular  17.1.0-next.0 - 18.0.0-next.1
>   Depends on vulnerable versions of undici
>   Depends on vulnerable versions of vite
>   node_modules/@angular-devkit/build-angular
> 
> vite  5.1.0 - 5.1.6
> Severity: moderate
> Vite's `server.fs.deny` did not deny requests for patterns with directories. - https://github.com/advisories/GHSA-8jhw-289h-jh2g
> fix available via `npm audit fix --force`
> Will install @angular-devkit/[email protected], which is a breaking change
> node_modules/vite
> 
> 3 vulnerabilities (1 low, 2 moderate)
> 
> To address all issues (including breaking changes), run:
>   npm audit fix --force

cat package.json
{
"name": "admin-ng",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test",
"serve:ssr:admin_ng": "node dist/admin_ng/server/server.mjs"
},
"private": true,
"dependencies": {
"@angular/animations": "^17.3.0",
"@angular/cdk": "^17.3.3",
"@angular/common": "^17.3.0",
"@angular/compiler": "^17.3.0",
"@angular/core": "^17.3.0",
"@angular/forms": "^17.3.0",
"@angular/material": "^17.3.3",
"@angular/platform-browser": "^17.3.0",
"@angular/platform-browser-dynamic": "^17.3.0",
"@angular/platform-server": "^17.3.0",
"@angular/router": "^17.3.0",
"@angular/ssr": "^17.3.0",
"express": "^4.18.2",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"zone.js": "~0.14.3"
},
"devDependencies": {
"@angular-devkit/build-angular": "^17.3.0",
"@angular/cli": "^17.3.0",
"@angular/compiler-cli": "^17.3.0",
"@types/express": "^4.17.17",
"@types/jasmine": "~5.1.0",
"@types/node": "^18.18.0",
"jasmine-core": "~5.1.0",
"karma": "~6.4.0",
"karma-chrome-launcher": "~3.2.0",
"karma-coverage": "~2.2.0",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "~2.1.0",
"tailwindcss": "^3.4.3",
"typescript": "~5.4.2"
}
}

Why is it happening?
Last time when I install tailwind with angular, I have not got any errors.

[alex-krasikau]

Hey @mahesh-riddles!

This issue is not related to the Tailwind but identifies security issues in the other libraries in your project.

As the npm output suggests, you can use npm audit fix --force to force-update these dependencies with vulnerabilities to solve these issues. But be cautious, as it's reported that this may cause breaking changes, so you may need to fix new issues after updating. Make sure to have a backup of your project or use version control so you can roll back if necessary.

Alternatively, you can manually update the dependencies; from the error message, it seems like updating all the Angular dependencies to the 17.3.3 version might fix the issue.

Always remember to check your project after performing updates to ensure everything still works as expected.

[mahesh-riddles]

Yes sir. It is not related with tailwindcss. But it is a problem with the dependencies. npm audit fix --force It did not fix the problem. I will try your other suggestion.

It is a new project. I think I can use the old versions which I created two weeks ago.

[mahesh-riddles]

17.3.3 did not fix the issue.

ng new project is not causing any warnings or errors.
When I try to try npm install -D tailwindcss is causing the problem. Haven't updated anything on this new project.

[alex-krasikau]

I'll try to reproduce this locally. For now, can you please run npm install -g @angular/cli@latest in the terminal and retry the setup.

[mahesh-riddles]

I just created new project using ng new site
After that I issued the command npm audit

npm audit
# npm audit report

undici  6.0.0 - 6.11.0
Undici's fetch with integrity option is too lax when algorithm is specified but hash value is in incorrect - https://github.com/advisories/GHSA-9qxr-qj54-h672
Undici's Proxy-Authorization header not cleared on cross-origin redirect for dispatch, request, stream, pipeline - https://github.com/advisories/GHSA-m4v8-wqvr-p9f7
fix available via `npm audit fix --force`
Will install @angular-devkit/[email protected], which is a breaking change
node_modules/undici
  @angular-devkit/build-angular  17.1.0-next.0 - 18.0.0-next.1
  Depends on vulnerable versions of undici
  Depends on vulnerable versions of vite
  node_modules/@angular-devkit/build-angular

vite  5.1.0 - 5.1.6
Severity: moderate
Vite's `server.fs.deny` did not deny requests for patterns with directories. - https://github.com/advisories/GHSA-8jhw-289h-jh2g
fix available via `npm audit fix --force`
Will install @angular-devkit/[email protected], which is a breaking change
node_modules/vite

3 vulnerabilities (1 low, 2 moderate)

To address all issues (including breaking changes), run:
  npm audit fix --force

So, There is something wrong. Do I have to report it to angular?
Is it normal? should I leave it as it is?
Please suggest

[alex-krasikau]

I face the same problem locally like you do, regardless of the dependency I install. I suggest ignoring it since it's just a warning that doesn't hinder development and will be fixed in future Angular releases. To help, you can locate or create a bug report in the Angular repository.

[KillianKLM]

Hi,
I encountered the same problem while installing devExtreme.

Indeed, the @angular-devkit/build-angular (my version = "17.3.3"), includes the versions :

"undicci": "6.7.1",
"vite": "5.1.5"

So I added an "overrides" tag in my package.json like this :

"overrides": {
    "@angular-devkit/build-angular": {
    "undici": "latest",
    "vite": "latest"
    }
}

And finally, your “npm audit” will not find any vulnerabilities.

[mahesh-riddles]

This is awesome.. Everything is perfect now.

[peterpeterparker]

Nice! It works as well to resolve latest compatibility issue when using Tailwind v4 in an Angular project:

npm error Could not resolve dependency:
npm error peerOptional tailwindcss@"^2.0.0 || ^3.0.0" from @angular-devkit/[email protected]

i.e.

"overrides": {
    "@angular-devkit/build-angular": {
      "tailwindcss": "latest"
    }
  }

Thanks!