I'm getting this error from a NextJS and TailwindCSS project.

Error evaluating Node.js code
Error: Cannot apply unknown utility class: font-extrabold

I saw similar posts and I've tried the suggestions but still no luck.

I'm trying to create a utilities class/css in globals.css file, but for some reason tailwind doesn't understand 'font-extrabold' css or any other custom css

@layer utilities {

  .text-30-extrabold {
    @apply text-[30px] font-extrabold text-white;
  }
}

Here's my folder structure, my fonts are hosted locally.

└──