Custom class inside @apply

Hello folks,

In tailwind.css file, I declare a custom class called “.flex-center” as seen above.

@layer base { .flex-center { display: flex; align-items: center; justify-content: center; } }

I can use that new custom class inside class prop of elements without any problem both on local development and nuxt build.

However when I use that class inside apply directive in a component as seen above, It works on local development phase, but fails in nuxt build.

<style lang="postcss" scoped>
li {
  @apply h-12 w-12 flex-center;
}
</style>

In nuxt build (it works on with nuxt local development), following error appears:

_

The flex-center class does not exist. If flex-center is a custom class, make sure it is defined within a @layer directive.

_

Now I’m using another approach without using custom class inside apply but I believe as nuxt tailwind community, we should fix it.

EDIT: After some research, I found this problem is not related with nuxt. In tailwind docs topic explained in detail.

[maxmellen]

Can confirm that I’m also running into this bug…

Dependency Versions:

• nuxt3: 3.0.0-27447229.20f3171
• tailwindcss: 3.0.23
• @nuxtjs/tailwindcss: 5.0.0

[daviddarx]

Getting the same problem with <style lang="pcss" scoped> h1 { @apply test; } </style>

If I implement it directly in the template, on top of the .vue, it’s working: <h1 class="test">I am the about page</h1>

“@nuxtjs/tailwindcss”: “^5.1.3”, “nuxt”: “3.0.0-rc.4”