Custom class inside @apply

[erdemgonul]

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.

[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

[slavanossar]

Also experiencing this, dependency versions listed below but I've notice it for a while now. Unlike original report also happens when in dev mode.

Dependency Versions:

• nuxt: 2.15.8
• tailwindcss: 3.0.23
• @nuxtjs/tailwindcss: 5.0.2

[defaye]

Also experiencing this.

• "nuxt": "^2.15.8",
• "@nuxtjs/tailwindcss": "~5.0.2",

[DEV-ONI]

I am experiencing this bug as well

"@nuxtjs/tailwindcss": "^5.0.2" "nuxt": "^2.15"

[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"

[erdemgonul]

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

[mklueh]

I'm running into this issue in a component with scss, while in pages everything works as expected.

In my case the reason was I had no semicolon at the end of the line

@apply max-w-full shadow rounded-md fixed bottom-2:

instead of this

@apply max-w-full shadow rounded-md fixed bottom-2;

[skoenfaelt]

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

same problem here using lang="scss" (<<< correct me, if this is wrong)