1

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?

rgettman
  • 176,041
  • 30
  • 275
  • 357
Savana
  • 53
  • 1
  • 6

3 Answers3

1

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

acharlop
  • 309
  • 4
  • 12
1

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!

Wassim BEN ROMDHANE
  • 11
  • 4
0

Fix in three steps

  1. Install this plugin if using VS-code, Tailwind CSS IntelliSense. Screenshot with pointers

  2. Click on your status bar language model tab; it often has languages depending on the current file (e.g. CSS, Javascript, Typescript, etc). It's always at the base of your workspace, where You often have prettier and other configurable quick links).

  3. Search for TailwindCSS and select.

Mr-Wealth
  • 1
  • 2