@apply issue on padding

[muhammedjenos]

I get this error when tailwind compiles :

The hover:py-5 class does not exist, but hover:my-5 does. If you're sure that hover:py-5 exists, make sure that any @import statements are being properly processed before Tailwind CSS sees your CSS, as @apply can only be used for classes in the same CSS tree.

the class is applied like so:

.security-item {
@apply flex flex-col-reverse p-3 transition-all border border-transparent rounded cursor-pointer group md:flex-row md:items-center hover:py-5 md:justify-between hover:transform-gpu hover:scale-105 hover:shadow-xl hover:bg-white hover:border-primary;

and in tailwind config I have extended the variants for padding, like so:
padding: ["hover"],

Any idea why the error was thrown when compiling? I tried moving @apply py-5 to a second line but that doesn't help either.

The project is being build using Nuxtjs, if that helps.

Thanks in advance