Using PrimeVue as part of own component library, issues with css layers with tailwind

[tgcarter]

Hi, I have a couple of couple of projects all sharing some UI elements all using PrimeVue 4 and Tailwind. i've created a custom component library with peerDependencies of PrimeVue and Tailwind to make some resusable components with custom styling I'd like. For example this component:

<script>
export default {
    name: 'NLActionsList',
    props: {
        items: {
            type: Array,
            required: true
        }
    }
}
</script>
<template>
    <Menu :model="items" class="min-w-0 border-none md:h-full"
        :pt="{ list: 'p-0 md:h-full md', item: 'md:grow', itemContent: 'h-full', itemLink: 'md:h-full px-2' }">
        <template #itemicon="{ item }">
            <font-awesome-icon :icon="item.icon" class="text-primary-500" />
        </template>
    </Menu>
</template>

This component works fine if I have this component in the main project I'm working on, however if I put in my component library, the PrimeVue styles override the Tailwind styles. It seems the CSS layers are being ignored. I'm doing everything correctly in relation to using Tailwind with Primevue with the css file and CssLayer setup for PrimeVue.