PrimeVue v4 styled mode doesn't work with Tailwind as documented

[minkyn]

Describe the bug

According to the v4 document, if I want to use the styled mode with Tailwind CSS, I need to first turn on the cssLayer option:

app.use(Prime Vue, {
  theme: {
    preset: Aura,
    options: {
      prefix: 'p',
      darkModeSelector: 'system',
      cssLayer: true,
    },
  },
}

Then create a css file (./assets/style.css) arranging the layer order:

@layer tailwind-base, primevue, tailwind-utilities;

@layer tailwind-base {
  @tailwind base;
}

@layer tailwind-utilities {
  @tailwind components;
  @tailwind utilities;
}

However, with this setup, when I experiment a simple page, the styles turn out to come all from Tailwind preflight including the button instead of PrimeVue:

<h1>Home</h1>
<p>Welcome to the Home Page</p>
<Button label="OK" />

I tried adjusting the order of importing the css file in main.ts:

import './assets/style.css'
import PrimeVue from 'primevue/config'
import Aura from 'primevue/themes/aura'

as well as

import PrimeVue from 'primevue/config'
import Aura from 'primevue/themes/aura'
import './assets/style.css'

but neither works.

Reproducer

https://stackblitz.com/edit/primevue-create-vue-typescript-issue-template

PrimeVue version

4.0.0-beta3

Vue version

3.x

Language

TypeScript

Build / Runtime

Vite

Browser(s)

No response

Steps to reproduce the behavior

1. Create a style file at ./assets/style.css:

@layer tailwind-base, primevue, tailwind-utilities;

@layer tailwind-base {
  @tailwind base;
}

@layer tailwind-utilities {
  @tailwind components;
  @tailwind utilities;
}

2. Setup PrimeVue config in main.ts:

import { createApp } from 'vue'

import PrimeVue from 'primevue/config'
import Aura from 'primevue/themes/aura'
import './assets/style.css'

import App from './App.vue'

const pinia = createPinia()

const app = createApp(App)

app.use(PrimeVue, {
  theme: {
    preset: Aura,
    options: {
      prefix: 'p',
      darkModeSelector: 'system',
      cssLayer: true,
    },
  },
})

app.mount('#app')

3. Create a simple page at App.vue:

<template>
  <div>
    <h1>Home</h1>
    <p>Welcome to the Home Page</p>
    <Button label="OK" />
  </div>
</template>

Expected behavior

The heading and paragraph should be rendered in Tailwind CSS preflight, and the button should be rendered in PrimeVue Aura theme.