Support for Tailwindcss@^3

[BeGj]

Which @angular/* package(s) are the source of the bug?

compiler-cli

Is this a regression?

No

Description

Angular currrently supports tailwindcss@"^2.0.0, but when installing tailwindcss@latest (^3.0) the installation fails.
When will Angular support Tailwind 3, and is there a temporary workaround?

Try it for yourself

1. npm i @angular/cli@latest
2. ng new myapp
3. npm i -D @tailwindcss@latest

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

npm i -D tailwindcss@latest
.....npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: @angular-devkit/[email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/tailwindcss
npm ERR!   tailwindcss@"3.0.1" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peerOptional tailwindcss@"^2.0.0" from @angular-devkit/[email protected]
npm ERR! node_modules/@angular-devkit/build-angular
npm ERR!   dev @angular-devkit/build-angular@"~13.1.1" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: [email protected]
npm ERR! node_modules/tailwindcss
npm ERR!   peerOptional tailwindcss@"^2.0.0" from @angular-devkit/[email protected]
npm ERR!   node_modules/@angular-devkit/build-angular
npm ERR!     dev @angular-devkit/build-angular@"~13.1.1" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 13.1.1
Node: 16.13.0
Package Manager: npm 8.1.0
OS: linux x64

Angular: 13.1.0
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1301.1
@angular-devkit/build-angular   13.1.1
@angular-devkit/core            13.1.1
@angular-devkit/schematics      13.1.1
@angular/cli                    13.1.1
@schematics/angular             13.1.1
rxjs                            7.4.0
typescript                      4.5.3

Anything else?

More info about tailwind 3 https://tailwindcss.com/blog/tailwindcss-v3
####The package.json:

  "dependencies": {
    "@angular/animations": "~13.1.0",
    "@angular/common": "~13.1.0",
    "@angular/compiler": "~13.1.0",
    "@angular/core": "~13.1.0",
    "@angular/forms": "~13.1.0",
    "@angular/platform-browser": "~13.1.0",
    "@angular/platform-browser-dynamic": "~13.1.0",
    "@angular/router": "~13.1.0",
    "rxjs": "~7.4.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~13.1.1",
    "@angular/cli": "~13.1.1",
    "@angular/compiler-cli": "~13.1.0",
    "@types/jasmine": "~3.10.0",
    "@types/node": "^12.11.1",
    "jasmine-core": "~3.10.0",
    "karma": "~6.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.1.0",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "~1.7.0",
    "typescript": "~4.5.2"
  }

[alan-agius4]

Addressed via #22345

[MarcoGlauser]

Thank you for the quick update!
Any chance of getting this patch in angular v12 or is it not critical enough? We're still waiting for other dependencies to become compatible with v13 before upgrading angular.

[BeGj]

When will the patch for v13 be released? @alan-agius4
Also:
If it would be released for v12-lts that would be nice! As we're having similiar difficulties as @MarcoGlauser

[alan-agius4]

It should be released this Wednesday for version 13.

Version 12 is currently in LTS and only security fixes are merged and released, please see our support policy https://angular.io/guide/releases#support-policy-and-schedule. For bug fixes please update to the latest stable version.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}