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

Question

I am using tailwindcss version 3.2.6.

I tried this in different ways but it didn't work. After trying it in VScode I'm getting an 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";

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?

Answer 1

dark: bg-black is invalid. It should be dark:bg-black without the space.

Answer 2

If vs code does the spacing when autosaving make sure to:

1. Change the language mode for that file, you can find it in the Status Bar Status bar

2. Select Tailwind CSS as a language modeChanging the language mode

You are good to go!