Using the theme with CSS file and @apply

[xAgustin93]

Good,

I'm trying to use the theme system but I have a question, if I use it in the following way it works correctly

page.tsx

import { ModeToggle } from "@/components/ModeToggle";

export default function Home() {
  return (
    <>
      <ModeToggle />
      <div className="bg-red-300 dark:bg-green-300">
        <h2>¡Hello!</h2>
      </div>
    </>
  );
}

But if I use it using an external CSS Module file it does not work.

page.tsx

import { ModeToggle } from "@/components/ModeToggle";
import styles from "./page.module.css";

export default function Home() {
  return (
    <>
      <ModeToggle />
      <div className={styles.container}>
        <h2>yeeeeeee</h2>
      </div>
    </>
  );
}

page.module.css

.container {
    @apply bg-red-300 dark:bg-green-300
}

Is there any way to fix it and be able to use CSS Module or SASS Module?