I attempted to combine Tailwindcss and Primeng in a project, but once I import Tailwind, the Primeng styles cease to be applied ongoing
Even with using the Tailwind prefix option, the moment Tailwind is imported, the Primeng styles vanish. To eliminate other possibilities, I initiated a new Angular project (Angular version 16) and exclusively installed Tailwindcss and 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";
Within the app component, there are some test divs (Primeng button and Input - Tailwind container with various styles)
If I remove the tailwindcss imports (specifically @tailwind/base) from the style.css, the primeng components display the correct style but the tailwind styles disappear