TailwindCSS 和 PrimeNG 库之间的兼容性问题

Posted 2023-03-06

【中文标题】TailwindCSS 和 PrimeNG 库之间的兼容性问题

【英文标题】：Compatibility issue between TailwindCSS and PrimeNG libraries

【发布时间】：2020-12-27 00:57:59

【问题描述】：

我有一个 Angular 9 项目，上面安装了 TailwindCSS 并成功地协同工作。

我需要一些 PrimeNG 库实用程序，我刚刚安装在我的 Angular 9 + TailwindCSS 项目中，但是当我将样式添加到 angular.json 文件时，它会覆盖我的 TailwindCSS 实用程序和样式，但如果我不添加primeng 主题文件，primeng 库组件没有以正确的方式呈现。

最后，我只需要使用 TailwindCSS 样式和类来渲染我的所有 Angular 自定义组件，但只有使用 PrimeNG 库组件的组件才会使用 PrimeNG 主题样式和类。

styles.scss 和 angular.json 文件具有以下 @apply 指令和样式关联：

angular.json 文件

"assets": [
    "src/favicon.ico",
    "src/assets"
 ],
"styles": [
    "./node_modules/primeicons/primeicons.css",
    "./node_modules/primeng/resources/themes/nova-light/theme.css",
    "./node_modules/primeng/resources/primeng.min.css",
    "src/styles.scss"
]

styles.scss

@tailwind base;

@tailwind components;

@tailwind utilities;

我尝试在 angular.json 文件中重新排序 style.scss 文件，但没有成功。

【参考方案1】：

我昨天遇到了同样的问题，所以我只是增加了 Tailwind CSS 类的特异性以应用我的 .magic-class。我使用了 Tailwind 编译文件中的 @apply 指令，并在我的 angular styles.css 中导入。在这种情况下，我必须申请！重要，因为没有它，更改不会应用。

p-menubar div.magic-class p-menubarSub ul li a span.p-menuitem-text 
  @apply text-blue-700 !important;

然后，将你的 .magic-class 添加到组件的 styleClass 中。

<p-menubar
  styleClass="magic-class"
  [model]="items"
></p-menubar>

您可以在developer tools 中找到您的完整路径。

PrimeNg MenuBar before

PrimeNg MenuBar with .magic-class