I have been using tailwindcss version 3.2.6.
I have attempted this in various ways without success. After testing it in VScode, I encountered the following error-
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>
)
}
What could be the reason behind this error?