Getting custom class error in next js application

[ktm72]

// tailwind.config.ts
import type { Config } from "tailwindcss";

const config: Config = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./node_modules/keep-react/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [require("keep-react/preset")],
};
export default config;

// global.css

@import "keep-react/css";
@tailwind base;
@tailwind components;
@tailwind utilities;

I am getting the following error in Next.js (14.2.3) while running in dev mode.

./app/globals.css
Syntax error: /home/pollob/Desktop/react/movie_list/node_modules/keep-react/lib/cjs/theme/main.min.css The `border-metal-200` class does not exist. If `border-metal-200` is a custom class, make sure it is defined within a `@layer` directive. 

[Arifulislam5577]

Dear @ktm72,

Thank you for bringing this to our attention. It seems like there was a misconfiguration in the tailwind.config.ts file.

To resolve the custom class error in your Next.js application, please make sure to add the following line to the tailwind.config.ts file under the presets property:

presets: [require("keep-react/preset")],

This line should be placed at the same level as the theme and content properties, not inside the plugins array.

Once you've made this adjustment, please restart your development server to see if the issue has been resolved. If you encounter any further issues or have any questions, feel free to reach out.

Thank you for your attention to this matter.