Not able to @apply a component class

[DaxGama]

This was possible previously but does not work in v4

.container {
    @apply flex flex-col h-full gap-1 items-center text-center;
}

.main {
    @apply container p-1 pt-0;
}

the conatiner class is not applied on main

[wongjn]

You need to register your container class extension into Tailwind using @utility like:

@utility container {
  @apply flex flex-col h-full gap-1 items-center text-center;
}

.main {
  @apply container p-1 pt-0;
}

[DaxGama]

That does not work as it does not quality as a utility name

throws this error 'Utilities should be alphanumeric and start with a lowercase letter.'

also, I think its should be a component class vs utility

[wongjn]

Seems to be working in this Tailwind Play. Furthermore, there is no @component directive to register a class into Tailwind, only @utility.

[DaxGama]

Vite was on an older version, works after the update