如何解决TailwindCSS与PrimeNG库之间的兼容性问题
我有一个安装了TailwindCSS的Angular 9项目，并成功地进行了合作。
我需要一些PrimeNG库实用程序，并且刚刚安装在Angular 9 + TailwindCSS项目中，但是当我将样式添加到angular.json文件中时，它将覆盖我的TailwindCSS实用程序和样式，但是如果我不这样做添加primeng主题文件，priming库组件将无法正确呈现。
最后，我需要用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文件重新排序，但没有成功。
解决方法
昨天我遇到了同样的问题，因此我只是增加了对Tailwind CSS类的特异性以应用.magic类。我从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类添加到组件的styleClass中。
<p-menubar
styleClass="magic-class"
[model]="items"
></p-menubar>
您可以在developer tools中找到完整的路径。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。