无法在我的 Angular 项目中安装 tailwind css

Posted 2023-03-07

【中文标题】无法在我的 Angular 项目中安装 tailwind css

【英文标题】：Can't install tailwind css in my Angular project

【发布时间】：2021-01-02 12:09:49

【问题描述】：

首先，我一直在关注本指南（以及其他指南）：https://medium.com/@jacobneterer/angular-and-tailwindcss-2388fb6e0bab

我一直在尝试在我的 Angular 项目中安装 Tailwind，但没有成功。除此之外，我什至从 0 开始创建了一个 Angular 项目来尝试进行基本安装，但我也无法做到。

我已完成本快速指南中出现的所有配置，包括更改自定义 webpack 构建器的应用程序构建器和 angular.json 配置。

ng serve 上的当前错误：

对 package.json 的依赖：

"dependencies": 
    "@angular-builders/custom-webpack": "^9.1.0",
    "@angular/animations": "~9.0.1",
    "@angular/cli": "^9.1.12",
    "@angular/common": "~9.0.1",
    "@angular/compiler": "~9.0.1",
    "@angular/core": "~9.0.1",
    "@angular/forms": "~9.0.1",
    "@angular/platform-browser": "~9.0.1",
    "@angular/platform-browser-dynamic": "~9.0.1",
    "@angular/router": "~9.0.1",
    "rxjs": "~6.5.4",
    "tslib": "^1.10.0",
    "zone.js": "~0.10.2"
  ,
  "devDependencies": 
    "@angular-devkit/build-angular": "~0.900.2",
    "@angular/compiler-cli": "~9.0.1",
    "@angular/language-service": "~9.0.1",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "codelyzer": "^5.1.2",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~2.1.0",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.2",
    "postcss-import": "^12.0.1",
    "postcss-loader": "^4.0.2",
    "postcss-scss": "^2.1.1",
    "protractor": "~5.4.3",
    "tailwindcss": "^1.8.10",
    "ts-node": "~8.3.0",
    "tslint": "~5.18.0",
    "typescript": "~3.7.5"
  

【参考方案1】：

最后我通过降级 postcss-loader 解决了这个问题。 4.0版本好像不行，只能手动放3.0：

npm uninstall postcss-loader --save-dev
npm install postcss-loader@~3.0.0 --save-dev

希望对你有所帮助。角度和顺风环境中的某些配置可能仍然失败，如果有人需要任何其他配置的帮助，请随时与我联系

【参考方案2】：

我没有足够的分数来支持上述评论或回答，所以我在这里说 jgascona 的回复确实也为我解决了这个问题。谢谢！