Tailwind CSS Compilation Error with Custom Class in Next.js Project

I’m working on a Next.js project with Tailwind CSS and I’ve encountered a compilation error that I can’t seem to resolve. The error is related to a custom utility class I’ve defined in my theme.css file. Here’s the error message:

Failed to compile

./styles/theme.css:7:9
Syntax error: D:DeveloperProjectsNextjs13nextappstylestheme.css The `bg-light-850` class does not exist. If `bg-light-850` is a custom class, make sure it is defined within a `@layer` directive.

  5 | @layer utilities {
  6 |     .background-light850_dark100 {
> 7 |         @apply bg-light-850 dark:bg-dark-100;
    |         ^
  8 |     }
  9 |     .background-light900_dark200 {

In my theme.css file, I have:

@layer utilities {
    .background-light850_dark100 {
        @apply bg-light-850 dark:bg-dark-100;
    }
    // ... other classes ...
}

And my tailwind.config.ts includes:

// ... other config settings ...

extend: {
  colors: {
    // ... other colors ...
    light: {
      900: '#FFFFFF',
      800: '#F4F6F8',
      850: '#FDFDFD',
      // ... other light colors ...
    },
    // ... other color settings ...
  },
  // ... other extended theme settings ...
}

// ... rest of the configuration ...

As you can see, light-850 is defined in my Tailwind configuration, but the compiler does not seem to recognize it. I have tried clearing the Next.js cache and rebuilding the project, but the issue persists.

Could anyone help me understand why this error is occurring and how to fix it?

Thank you in advance for your assistance!

Rebuild, remove cache, asked copilot.