Overwite PrimeNG component styles directly on HTML template with tailwind

So I'm working with PrimeNG's panel menu component, and I need to apply some styles directly using Tailwind classes instead of inline styles or external CSS.

This is my current HTML template:

<p-panelMenu styleClass="w-full" [model]="menuItems()">
<ng-template pTemplate="item" let-item>
<ng-container>
@if (item.url) {
<a
target="_blank"
class="align-items-start line-clamp-2 flex cursor-pointer font-medium leading-6 text-foreground"
[href]="item.url"
>
<span class="ml-2 line-clamp-2 flex cursor-pointer font-medium leading-6 text-foreground">
{{ item.label | translate }}
</span>
</a>
} @else {
<span class="align-items-start line-clamp-2 flex cursor-pointer font-medium leading-6 text-foreground">
<span>{{ item.label | translate }}</span>
@if (item.items) {
<ng-icon name="phosphorCaretDown" size="16" class="ml-auto text-primary" />
}
</span>
}
</ng-container>
</ng-template>
</p-panelMenu>


And this is my estyles on style property of angular componente decorator:

styles: [
`
.p-panelmenu-header-content {
@apply border-none;
&:hover {
@apply bg-transparent;
}
}
.p-panelmenu-content {
@apply border-none;
}
.p-toggleable-content {
@apply m-0;
}
li {
@apply mt-2;
a {
@apply text-title-6 line-clamp-2 flex cursor-pointer leading-6 text-foreground;
}
}
`]


I'm trying not to use the styles in the component and do it directly in line with the tailwind classes.

I have tried options such as the following but without getting what I want.

<p-panelMenu
[styleClass]="'w-full md:w-20rem border-0'"
class="[&>*]:line-clamp-2 [&>*]:w-full [&>*]:font-medium [&>*]:leading-6
[&>*]:text-foreground"
[model]="menuItems()"
>

Continue reading...