Whats the correct way of @apply scoped use

[derHodrig]

My Issue

https://stackblitz.com/edit/nuxt-starter-6leryy?file=app.vue

I have a component, lets keep it simple

<template>
  <div class="t-h-full t-w-full customBG">
  </div>
</template>

<script>
export default {
  name: 'CustomComponent',
}
</script>

<style scoped lang="scss">
.customBG {
  @apply t-bg-blue-800
}
</style>

Important, I use prefix t-

Now after compiling I got this error: The 't-bg-blue-800' class does not exist. If 't-bg-blue-800' is a custom class, make sure it is defined within a @layer directive.

I saw many other issues about that but not really a solution. I used lang="postcss" not working.

Versions

"@nuxtjs/tailwindcss": "^5.3.3", "nuxt": "^2.15.8",

Side Info

Maybe its important to say, I use Tailwind along with Vuetify. With the prefix mode I do not face any issues. Even without prefix I got the same error.

---

Could you use it in your projects?