I am currently working on a Next.js project and incorporating Tailwind CSS. Unfortunately, I have come across a compilation error that I am struggling to resolve. The error specifically pertains to a custom utility class that I defined in my theme.css file. Here is the error message I am receiving:
Failed to compile
./styles/theme.css:7:9
Syntax error: D:\Developer\Projects\Nextjs13\nextapp\styles\theme.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 {
Within my theme.css file, I have the following code:
@layer utilities {
.background-light850_dark100 {
@apply bg-light-850 dark:bg-dark-100;
}
// ... other classes ...
}
Furthermore, my tailwind.config.ts file includes the following:
// ... 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 ...
Although the color light-850 is defined in my Tailwind configuration, the compiler is not recognizing it. I have attempted to clear the Next.js cache and rebuild the project, but the error persists.
If anyone could provide insight into why this error is happening and how to resolve it, I would greatly appreciate it.
Thank you all for your help!
Tried to rebuild, clear cache, and seek assistance from copilot.