Angular 13 的顺风

Posted 2023-02-23

【中文标题】Angular 13 的顺风

【英文标题】：Tailwind with Angular 13

【发布时间】：2022-01-21 20:53:46

【问题描述】：

当我运行时：ng add @ngneat/tailwind

我收到此错误：发生未处理的异常：不支持：关键字“id”，使用“$id”作为架构 ID !!!!!!

VSCode.

Angular cli v：13.1.2

npm v: 8.3.0

节点 v：17.2.0

赢 10 64

【问题讨论】：

需要更多信息。请提供代码的堆栈闪电战或至少完整的堆栈跟踪。

请提供足够的代码，以便其他人更好地理解或重现问题。

【参考方案1】：

这是open issue 对ngneat 的人提出的问题，也需要他们解决。

我将分享hotfix provided in the linked issue。所有致谢kingjordan:

Thanks to @kingjordan for his solution.

Install the dependencies:

npm install tailwindcss@latest @ngneat/tailwind@latest

Create a configuration file for Tailwind CSS at the root of your workspace:

npx tailwindcss init

Add purge configurations:

module.exports = 
  ...
  purge: 
    enabled: guessProductionMode(),
    content: [ "<path/to/project/**/*.html, ts, jsx, etc>" ],
  ,
  ...


Import Tailwind CSS styles into the root styles file of your project.

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

【参考方案2】：

对于小于 11.2.0 的 Angular 版本，请尝试使用 tailwind install 的步骤：

https://dev.to/angular/setup-tailwindcss-in-angular-the-easy-way-1i5l#:~:text=in%203%20MINUTES!-,Installing%20TailwindCSS%20(Angular%20version%20%3E%3D%2011.2.0),-If%20your%20Angular