Tailwind v4 Dark Mode Not Working in Angular 19 (SCSS)

I'm using Angular 19 with Tailwind CSS v4 and SCSS as my stylesheet preprocessor. Tailwind classes are working ex: bg-white but not the dark mode ex: dark:bg-black.

What I Did:

1. I followed the installation from official Tailwind documentation for Angular Link
2. Added dark class to html

src/Styles.scss

@use '@fontsource/poppins';
@use 'primeicons/primeicons.css';
@use 'tailwindcss';


Test

<main class="flex-grow bg-white px-6 py-12 dark:bg-black">
<p>Test</p>
</main>

Continue reading...