Error: Cannot apply unknown utility class: !important

[HeySkidee]

Im using Tailwind CSS v4 with Next.js v15.2.4
whenever i try to use !important it gives me the error: Cannot apply unknown utility class: !important

code:

@layer utilities {
    .avatar {
      @apply p-0 focus-visible:ring-0 bg-none rounded-full !important;
    }
}

[wongjn]

You'd need to use the ! suffix instead like:

@layer utilities {
  .avatar {
    @apply p-0! focus-visible:ring-0! bg-none! rounded-full!;
  }
}