Is there any way to keep default styles of prime ng but change inline some style properties using tailwind css without reseting all styles of component? #2811
Replies: 1 comment
-
@DAVIAMERICO242 I think you might forget to do this: https://primeng.org/guides/csslayer#tailwind @layer tailwind-base, primeng, tailwind-utilities;
@layer tailwind-base {
@tailwind base;
}
@layer tailwind-utilities {
@tailwind components;
@tailwind utilities;
} Tailwindcss normalizes a few browser default styles and we have to make sure it does not do that for PrimeNg components using the approach above. What you can achieve currently is: Utilize the built-in <h1 class="text-3xl font-bold underline">Hello world!</h1>
<div class="card flex justify-content-center">
<p-button styleClass="bg-red-500 p-4"> Red button </p-button>
</div> or use tailwindcss's <div class="card flex justify-content-center">
<p-button styleClass="custom-button"> Green button </p-button>
</div> .custom-button {
@apply bg-green-500 p-3 rounded font-bold;
} or using ::ng-deep with :host ::ng-deep .p-panel-header {
@apply bg-emerald-500 border-cyan-300 text-white;
}
:host ::ng-deep .p-panel-content {
@apply border-cyan-300;
} Unfortunately, the approach you've shown using [ngClass] would only apply styles on the host element and not the button itself. Example code: The best way to create your theme for PrimeNg is with the theme API: https://primeng.org/theming#customtheme |
Beta Was this translation helpful? Give feedback.
-
For example I'd like to keep original padding etc from
p-button
but change color by tailwind:I was used to do it using native styles, I wouldnt like to change or modify any theme.
Beta Was this translation helpful? Give feedback.
All reactions