将 Tailwindcss 添加到项目后 Primeng 无法正常工作

Question

我尝试使用 tailwindcss 和 primeng 创建一个项目。但是导入Tailwind后，Primeng的样式不再适用

我尝试使用 Tailwind 前缀选项，但是一旦导入 Tailwind，Primeng 的样式就不再应用。为了排除其他原因，我创建了一个新的 Angular 项目（Angular 版本 16）并仅安装了 Tailwindcss 和 Primeng。

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [
        "./src/**/*.{html,ts}",
    ],
    theme: {
        extend: {},
    },
    plugins: [],
    prefix: "tw-",
}

angular.json

{
    "assets": [
    "src/favicon.ico",
    "src/assets"
],
"styles": [
    "src/styles.css"
],
"scripts": []
},

style.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@import "primeng/resources/themes/lara-light-blue/theme.css";
@import "primeng/resources/primeng.css";

在应用程序组件中，我有一些测试 div（Primeng 按钮和输入 - Tailwind 容器，具有某些样式）

当我从 primeng 组件中删除 tailwindcss 导入（更准确地说是 @tailwind/base）后，它的style.css样式就正确了。但顺风风格消失了

Answer 1

像这样修改你的 style.css ：

@import "tailwindcss/base" layer(tailwindcss);
@import "tailwindcss/components" layer(tailwindcss);
@import "tailwindcss/utilities" layer(tailwindcss);
@import "primeng/resources/themes/lara-light-blue/theme.css";
@import "primeng/resources/primeng.css";

我尝试过，它对我有用！