css "@apply" not working

[vocal heath]

the black color in tailwind doesn't have numbers, there's only one black text-black

[pearl lily]

new error

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

  60 | 
  61 | .hero__image-overlay {
> 62 |   @apply absolute xl:-top-24 xl:-right-1/2 -right-1/4 bg-hero-bg bg-repeat-round -z-10 w-full xl:h-screen h-[590px] overflow-hidden;
     |   ^
  63 | }

seems like the whole css file is having a breakdown

nevermind, so far so good - managed to fix the error.

cheers for the help