custom tailwind style in @layer directive cannot be used within <style> block

[laporchen]

Environment

• Operating System: Darwin
• Node Version: v20.6.1
• Nuxt Version: 3.13.0
• CLI Version: 3.13.1
• Nitro Version: 2.9.7
• Package Manager: [email protected]
• Builder: -
• User Config: compatibilityDate, devtools, modules
• Runtime Modules: @nuxt/[email protected]
• Build Modules: -

Version

2.18.4

Reproduction

https://stackblitz.com/edit/nuxt-ui-rzyn6r?file=assets%2Fcss%2Ftailwind.css

Description

I tried to use @apply in <style> block in my vue files. But I got the error that my class does not exists.

[vite-node] [plugin:vite:css] [CssSyntaxError] ./app.vue:9:2 : The `bar` class does not exist. If `bar` is a custom class, make sure it is defined within a `@layer` directive.

I also tested it without @nuxt/ui module but only @nuxtjs/tailwindcss module, which works perfectly fine.
I looked for config in nuxt UI document, but didn't find anything that could help fixing this.

Additional context

Here's one reproduction with only @nuxtjs/tailwindcss installed
https://stackblitz.com/edit/nuxt-ui-eadnqo?file=nuxt.config.ts

Logs

No response