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

I am using tailwindcss version 3.2.6

Here I am getting a error like this-

The dark: class does not exist. If dark: is a custom class, make sure it is defined within a @layer directive.

When I try to add this in global.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    body {
        @apply max-w-2xl mx-auto px-4 bg-white text-black;
        @apply dark: bg-black dark:text-white
    }
}

tailwind.config.js-

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}"
  ],
  darkMode: "class",
  theme: {
    extend: {
      fontFamily: {
        "sans": ['var(--font-rubik)']
      }
    }
  },
  plugins: [require("daisyui")],
}

_app.tsx-

import "@/styles/globals.css"
import type { AppProps } from "next/app";
import { ThemeProvider } from "next-themes";

//Fonts
import { rubik } from "@/Fonts";

export default function App({ Component, pageProps }: AppProps) {
  return (
    <ThemeProvider attribute="class">
      <main className={`${rubik.variable} font-sans`}>
        <Component {...pageProps} />
      </main>
    </ThemeProvider>
  )
}

Why I am facing that error

tailwindlabs / tailwindcss

The `dark:` class does not exist. If `dark:` is a custom class, make sure it is defined within a `@layer` directive. #10592